窗口调整大小时移动div及divA置于divB下方的实现问题

嘿，我太懂这种用float布局却达不到预期效果的烦躁了！其实问题出在float元素会脱离正常文档流，导致后续的divA会“钻”到divB的旁边，而不是乖乖待在下面。咱们来逐个解决：

方法1：直接给divA加clear属性 #

这是最直接的解决方案，让divA主动清除左右两侧的浮动影响，强制自己跑到所有浮动元素的下方。

HTML代码： #

<div class="divB">我是divB</div>
<div class="divA">我是divA</div>

CSS代码： #

.divB {
  float: left; /* 假设你给divB设置了左浮动 */
  width: 200px;
  height: 100px;
  background-color: #eee;
}

.divA {
  clear: both; /* 关键！清除左右两侧的浮动 */
  width: 200px;
  height: 100px;
  background-color: #f66;
}

方法2：用clearfix修复父容器塌陷（如果divA和divB在同一个父容器里） #

有时候float会导致父容器高度塌陷，这时候给父容器加一个clearfix类，就能让父容器重新识别子元素的高度，自然也能让divA回到divB下方。

先定义clearfix的CSS： #

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后修改HTML： #

<div class="parent-box clearfix">
  <div class="divB">我是divB</div>
  <div class="divA">我是divA</div>
</div>

对应的子元素CSS： #

.divB {
  float: left;
  width: 200px;
  height: 100px;
  background-color: #eee;
}

.divA {
  width: 200px;
  height: 100px;
  background-color: #f66;
}

方法3：改用现代布局（推荐！） #

如果不是必须用float，建议直接用Flexbox或者Grid布局，不仅更直观，还能避免float带来的各种奇怪问题。比如用Flexbox实现垂直排列：

HTML代码： #

<div class="parent-box">
  <div class="divB">我是divB</div>
  <div class="divA">我是divA</div>
</div>

CSS代码： #

.parent-box {
  display: flex;
  flex-direction: column; /* 设置垂直排列 */
}

.divB {
  width: 200px;
  height: 100px;
  background-color: #eee;
}

.divA {
  width: 200px;
  height: 100px;
  background-color: #f66;
}

这样divA就会稳稳地待在divB下面啦，再也不用跟float的各种坑较劲～

内容的提问来源于stack exchange，提问作者Miguel Betancourt