译者注：这是接到邀请后的第一篇翻译，个人水平还很低。
文章原址：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）
