浮动

• 被浮动的元素直到遇到父元素的边框、其它浮动的元素、另一个块元素时，才会停止。
• 当一行容不下时，浮动的元素会换行。
• 浮动的元素不会超过它上边的兄弟元素。
• 浮动的元素不会遮住文字, 文字会在其四周环绕（可设置文字环绕图片）。

所有元素经过浮动之后都会变为行内块元素。

高度塌陷问题

使用浮动后可能造成高度塌陷的问题，如下：

<div class="d1">
  <div class="d2">d2</div>
</div>

.d1 {
  border: 2px solid #f1393a;
}

上面的代码中，父元素的高度会由子元素撑开。但是，我们为子元素设置浮动后，其父元素的高度就没有了，那么其父元素的兄弟元素会往上移动，这就是高度塌陷的第一种情况。解决办法如下：

• 给父元素设置高度

  但是，如果其子元素的高度太大时会溢出，然后其父元素不能适应其子元素，因此不推荐直接给父元素设置高度。

• 开启 BFC

  BFC 全称是 Block Formatting Context，即块格式化上下，是 W3C 标准中规定的。BFC 默认是关闭的，开启方式有很多，如下：

  • 根元素或其它包含它的元素
  • 浮动（元素的 float 不为 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块 inline-blocks（元素的 display: inline-block`）
  • 表格单元格（元素的 display: table-cell, HTML 表格单元格默认属性）
  • overflow 的值不为 visible 的元素
  • 弹性盒 flex boxes（元素的 display: flex 或 inline-flex）

  这里推荐使用 overflow，其它的方式会有副作用。

  给父元素设置 overflow 属性：

  .d1 {
    border: 2px solid #f1393a;
    overflow: auto;
    /* 或者 */
    /* overflow: hidden; */
    /* 兼容 IE6 */
    /* zoom:1 */
  }
  

• 清理浮动

  给 .d2 清除浮动（注意, 使用的是父元素的伪元素），推荐使用此方式。

  .d1::after {
    content: "";
    display: table;
    clear: left;
  }
  

清理浮动

清除浮动到底是什么意思呢？清除浮动后，可以使布局看起来像没有使用过浮动一样。简单来讲，清除浮动后就相当于元素之间没有浮动，元素的位置还是使用浮动之前的位置。注意！只能通过兄弟节点来清除浮动，且只能使用块元素或行级块元素来清理浮动。