优雅的清除浮动

为何要清除浮动？

直接看代码

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

.container {
  background-color: yellow;
}
.a,
.b,
.c {
  width: 200px;
  height: 100px;
  background-color: red;
  margin: 10px;
  float: left;
}

此时出现了一个著名的问题高度坍塌，本来我们像用 3 个 div 撑起父容器的高度，从而达到自适应的目的，但是由于子元素全部浮动脱离了文档流，从而容器没有元素来撑起它的高度，导致”坍塌“。

此时 container 的高度为 0，那么如何撑起父容器？就要用到清除浮动了。

清除浮动的方法

增加空元素

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="clear"></div>
</div>

/*样式增加*/
.clear {
  clear: both;
}

（撑起后的效果，.container 的高度为 120px）

底部增加了一个 div 并设置了 clear:both，这表示该 div 两边都不能出现浮动的元素，如果不设置 clear，那么它会自动出现在父容器开始的位置，属于标准文档流，其他三个 div 浮动在它的上方，但是父容器的高度只会跟随 clear 高度变化，虽然这样也能实现，但是没有 luan 用。此时设置 clear，强行不允许左右存在浮动元素，只能出现在浮动元素的下一行，这样就把 container 的高度撑起来了。

这种方法比较容易实现，但是增加了一个无意义的空标签，不符合 html 语义化，显然不太优雅。

让父容器形成 BFC

其实有一个最简单的方法就是让 container 形成一个 BFC，这样父容器高度将会自动撑起！

.container {
  background-color: blue;
  overflow: auto;
}

只需要给父容器设置overflow为 auto/hidden 即可形成 BFC，那么选择 auto 还是 hidden？其实我也不知道，听说 auto 对 seo 更友好。

通过让父容器形成 BFC 来清除浮动应该是最简单的方式，关于更多 BFC 的细节可以参考https://segmentfault.com/a/1190000003827247

听说这是最优雅的姿势？

用after伪元素实现，注意是伪元素，而不是伪类，先上代码：

.container:after {
  display: block;
  content: '.';
  clear: both;
  visibility: hidden;
  height: 0px;
}

给容器的 after 伪元素设置相关属性，以及 IE hack 来兼容各种浏览器，after 伪元素给父容器的最后添加了一个内容为.的块级元素，注意是通过 css 来实现的，并不是直接加在 html 文档中。这样的做法有点类似于第一种visibility: hidden通过隐藏而隐蔽了内容，设置 height 为 0 而不会影响到父容器的有效高度（.也会占用 content 从而形成一定的高度）。

这种做法其实在本质上是和第一种方法一样的，但是与第一个最重要的区别是，通过样式来添加内容，没有将无意义的 html 标签加入到文档，会具有更好的语义性和可读性，那么这算是最优雅了的吗？

作者对 Web 标准理解粗浅，若有笔误还请指正，转载请注明出处。