CSS 浮动

浮动是什么

float 的历史能追溯到报纸排版时代，它让元素脱离普通文档流，向左或向右贴靠，后面的内容绕开它继续排。float: left 向左贴，float: right 向右贴。上一篇文章说过，块级元素默认独占一行，浮动就是打破这个规矩的开关。

文字环绕

浮动元素后面的文字会绕着它排，这是 float 的本职工作，图文混排。

<style>
  .pic {
    float: left;
    width: 160px;
    height: 120px;
    margin-right: 16px;
    background: #f39c12;
    text-align: center;
    line-height: 120px;
  }
</style>
<div class="pic">图片占位</div>
<p>这段介绍文字会贴着图片的右边绕行，图片多高文字就绕多长，换行的时候自动避开图片区域，形成报刊杂志里常见的图文混排效果。如果把 float 改成 right，图片就会贴到右边，文字从左边绕。</p>

父容器高度塌陷

浮动元素脱离了文档流，父容器没设高度时，里面如果全是浮动子元素，父容器的高度会被算成 0，这就是高度塌陷。

<style>
  .parent {
    background: #ecf0f1;
  }
  .child {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    background: #e74c3c;
  }
</style>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<p>下面这段文字</p>

这段代码里 .parent 的背景色看不到，因为高度塌陷成 0，后面的文字直接顶到浮动元素旁边。要解决，得清除浮动。

清除浮动的三种办法

第一种，给浮动元素后面的兄弟设置 clear: both。clear 的意思是，这个元素的左、右两侧都不允许有浮动元素，于是它换到下一行，把父容器重新撑起来。

p {
  clear: both;
}

第二种，父元素加 overflow: hidden。overflow 本来是管内容溢出的，设成 hidden 之后浏览器会把浮动子元素算进父元素的高度。副作用是内容一旦超出范围就会被裁掉，如果父元素里没有需要溢出的内容，一般没问题。

第三种，推荐的做法，用伪元素 clearfix。原理是借用伪元素在父元素内部末尾生成一个看不见的块，让它清除两侧浮动，从而撑起父容器。

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

用法是把 clearfix 类名加到父元素上。为什么不直接加一个空 div 呢，因为那要在 HTML 里塞无意义的标签，结构不干净。伪元素的办法把样式全收进 CSS，HTML 里只需多一个类名。

小结

float 的看家本领是图文混排，文字环绕是它唯一顺手的事。拿它做整页布局也能跑，但后面实战篇会看到一堆限制。现代布局请用 Flexbox 和 Grid，接下来几篇逐步展开，整个系列的目录里能找到完整的布局体系。