stackoverflow高赞翻译 | 什么是clearfi

译者注：这是接到邀请后的第一篇翻译，个人水平还很低。
文章原址：https://stackoverflow.com/questions/8554043/what-is-a-clearfix

问题描述：

最近我在浏览一些网站的源码，发现每个<div>都有一个clearfix类。
我经过Google查询后发现，clearfix有时是为了EI6。请问本质上clearfix是什么？
您能否给一些使用clearfix和不使用clearfix的例子进行比较？
(Ask by H Bellamy)

高赞回答

如果你不需要支持IE9及以下版本，你可以使用flexbox,而不需要使用浮动布局。

值得注意的是，在更好的替代方式下，浮动元素的布局方式只会让人越来越心塞（discouraged）。

• display: inline-block-更好
• Flexbox-更好（但支持的浏览器有限）

Flexbox支持Firefox 18, Chrome 21, Opera 12.10, Internet Explorer 10, Safari 6.1 (包括移动端) 和Android的默认浏览器 4.4。
这里有一个详细列表：http://caniuse.com/flexbox
（也许一次定位就成功了，这可能是绝对推荐的布局元素的方式。）

---

clearfix是一种自动清除子元素的方式，所以它不必增加标记。它经常使用于浮动布局中，元素浮动水平堆叠。
clearfix是一种对抗零高度容器问题元素的方式.
clearfix的例子如下：

.clearfix:after {
   content: " "; /* 旧版浏览器不支持空内容 */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

另外，如果你不要求IE8以下支持，下面的代码也可以：

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

通常你使用下面的方式：

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- 清除浮动 -->
</div>

如果用clearfix,你需要使用下面的方式：

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!--没有清除div!-->
</div>

相关材料：this article - by Chris Coyer @ CSS-Tricks
（answered by John Slegers）

---

---

如果你通过可视化来学习，下面这张图将帮你更好的理解clearfix的作用。

图片来自原答案
（answered by ihue）