什么是clearfix？
最近我正在浏览一些网站的代码，并看到每个<div>都有一个类clearfix 。
在Google的快速搜索之后，我了解到它有时是针对IE6的，但实际上是一个clearfix？
您能否提供一些带有clearfix的布局示例，与没有clearfix的布局相比？
如果您不需要支持IE9或更低版本，则可以自由使用Flexbox，并且不需要使用浮动布局。
值得注意的是，今天，使用浮动元素进行布局越来越受到使用更好替代品的阻碍。
display: inline-block - 更好 Flexbox支持Firefox 18，Chrome 21，Opera 12.10和Internet Explorer 10，Safari 6.1（包括Mobile Safari）和Android的默认浏览器4.4。
有关详细的浏览器列表，请参阅：http：//caniuse.com/flexbox。
（也许一旦它的位置完全确立，它可能是布局元素的绝对推荐方式。）
clearfix是元素自动清除其子元素的一种方式，因此您不需要添加额外的标记。 它通常用于浮动布局，其中元素浮动以水平堆叠。
clearfix是一种解决浮动元素的零高度容器问题的方法
clearfix执行如下：
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
或者，如果您不需要IE <8支持，以下情况也可以：
.clearfix:after {
content: "";
display: table;
clear: both;
}
通常你需要做如下的事情：
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
使用clearfix，您只需要以下内容：
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
在本文中阅读关于它的内容 - 通过Chris Coyer @ CSS-Tricks
如果通过可视化学习，这张图片可能会帮助您了解clearfix的功能。
其他答案是正确的。 但我想补充一点，这是人们第一次学习CSS并滥用float来完成所有布局的遗留问题。 float是为了在长时间运行文本之后做类似浮动图像的东西，但很多人将它用作它们的主要布局机制。 既然它并不是真正的意思，你需要像“clearfix”这样的黑客才能使它工作。
这些日子display: inline-block是一个可靠的替代品（IE6和IE7除外），虽然更多的现代浏览器在Flexbox，网格布局等名称下提供更有用的布局机制。
上一篇: What is a clearfix?