什么是clearfix？
最近我正在浏览一些网站的代码，并看到每个<div>都有一个类的clearfix 。
经过Google的快速search，我了解到它有时候是IE6的，但实际上是一个clearfix？
你可以提供一个带有clearfix的布局的例子，相比于没有clearfix的布局吗？
如果您不需要支持IE9或更低版本，则可以自由使用flexbox，而不需要使用浮动布局。
值得注意的是，今天，使用浮动元素进行布局越来越不被使用更好的替代品。
-
display: inline-block– 更好 - Flexbox – 最好的（但有限的浏览器支持）
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的function。
其他答案是正确的。 但是我想补充一点，这是人们第一次学习CSS的时代的遗留问题，并且滥用float来做所有的布局。 float是为了在长时间的文本旁边做浮动图像之类的东西，但是很多人用它作为主要的布局机制。 既然它并不是真正意义上的，那么你需要像“clearfix”这样的黑客来使它工作。
这些日子display: inline-block是一个可靠的select（ IE6和IE7除外 ），虽然更现代的浏览器，如flexbox，网格布局等命名下更有用的布局机制。
clearfix允许一个容器包装它的浮动的孩子。 如果没有一个clearfix或相当的风格，一个容器不会环绕浮动的孩子并且崩溃，就好像它的浮动的孩子被完全放置一样。
有几个版本的clearfix， Nicolas Gallagher和Thierry Koblentz是主要作者。
如果你想支持旧版本的浏览器，最好使用这个clearfix：
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
在SCSS中，您应该使用以下技术：
%clearfix { &:before, &:after { content:" "; display:table; } &:after { clear:both; } & { *zoom:1; } } #clearfixedelement { @extend %clearfix; }
如果你不关心支持旧版本的浏览器，那么就有一个更短的版本：
.clearfix:after { content:""; display:table; clear:both; }
简单地说， clearfix是一个黑客 。
这是我们都必须忍受的那些丑陋的事情之一，因为它确实是确保浮动的子元素不会溢出父母的唯一合理的方式。 还有其他的布局scheme，但是在今天的网页devise/开发中，浮动是很常见的，忽略了clearfix hack的价值。
我个人倾向于Micro Clearfix解决scheme（Nicolas Gallagher）
.container:before, .container:after { content:""; display:table; } .container:after { clear:both; } .container { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }
参考
提供2017年第二季度的最新情况。
Firefox 53， Chrome 58和Opera 45中提供了一个新的CSS3显示属性。
.clearfix { display: flow-root; }
检查任何浏览器的可用性： http : //caniuse.com/#feat=flow-root
在基于CSS浮动布局中常用的一种技术是将一些CSS属性分配给一个你知道将包含浮动元素的元素。 通常使用名为clearfix的类定义实现的技术（通常）实现以下CSS行为：
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; zoom: 1 }
这些组合行为的目的是创build一个容器:after包含单个“。”的活动元素:after 。 标记为隐藏，将清除所有先前的浮动，并有效地重置下一个内容的页面。
另一个（也许是最简单的）实现clearfix的选项是使用overflow:hidden; 在包含元素上。 例如
.parent { background: red; overflow: hidden; } .segment-a { float: left; } .segment-b { float: right; }
<div class="parent"> <div class="segment-a"> Float left </div> <div class="segment-b"> Float right </div> </div>
这是一个不同的方法，但有一点不同
不同的是用\00A0 == whitespacereplace的内容点
更多关于这个http://www.jqui.net/tips-tricks/css-clearfix/
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} .clearfix{ display: inline-block;} html[xmlns] .clearfix { display: block;} * html .clearfix{ height: 1%;} .clearfix {display: block}
这是它的一个紧凑版本…
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}
我尝试了接受的答案，但仍然有内容alignment的问题。 添加一个“之前”select器，如下所示修复了这个问题：
// LESS HELPER .clearfix() { &:after, &:before{ content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; } }
下面将会讨论CSS：
clearfix:after, clearfix:before { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; }
