clearfix类在css中做什么？
这个问题在这里已经有了答案：
如何漂浮工作
当页面上存在浮动元素时，非浮动元素环绕浮动元素，类似于文本在报纸中围绕图片的方式。 从文档的角度来看（HTML的原始目的），这就是浮动的工作原理。
float vs display:inline
在发明display:inline-block ，网站使用float来设置元素彼此相邻。 float优于display:inline因为使用后者，不能设置元素的尺寸（宽度和高度）以及垂直填充（顶部和底部） - 浮动元素可以执行此操作，因为它们被视为块元素。
浮动问题
主要问题是我们正在使用float达到预期的目的。
另一个是虽然float允许并排块级元素，浮动不会赋予其容器形状。 这就像position:absolute ，元素“从布局中取出”。 例如，当一个空容器包含一个浮动的100px x 100px <div> ， <div>不会将100px的高度赋予容器。
与position:absolute不同，它会影响周围的内容。 浮动元素之后的内容将“包裹”元素。 它从它旁边的渲染开始，然后在它下面渲染，例如报纸文本如何在图像周围流动。
Clearfix来拯救
clearfix所做的就是强制浮动内容或包含浮动块的容器在其下面呈现之后的内容。 Clear-Fix有很多版本，但它的名字来自通常使用的版本 - 使用CSS属性clear 。
例子
根据浏览器和用例，以下是几种执行clearfix的方法。 人们只需要知道如何在CSS中使用clear属性，以及如何在每个浏览器中呈现浮动以实现完美的跨浏览器清除修复。
你有什么
您提供的样式是一种向后兼容的clearfix形式。 我找到了关于这个clearfix的文章。 事实证明，这是一个旧的clearfix - 仍然适应旧的浏览器。 文章中还有一个更新，更清晰的版本。 这是细节：
第一个clearfix附加了一个不可见的伪元素，它的样式clear:both位于目标元素和下一个元素之间。 这将强制伪元素在目标下呈现，并在伪元素下面呈现下一个元素。
第二个附加了以前的浏览器不支持的样式display:inline-block 。 内联块与内联块一样，但会为您提供一些阻止元素的属性，例如宽度，高度以及垂直填充。 这是针对IE-MAC的。
这是由于上面的IE-MAC规则重新应用display:block 。 该规则从IE-MAC“隐藏”。
总而言之，这.clearfix规则让.clearfix跨浏览器工作，并且考虑到旧浏览器。
当元素（如div ） floated ，其父容器不再考虑其高度，即
<div id="main">
<div id="child" style="float:left;height:40px;"> Hi</div>
</div>
父容器的默认高度不会超过40像素。 如果您使用这些容器来构造布局，这会导致很多奇怪的小怪癖。
因此，各种框架使用的clearfix类通过使父容器“确认”包含的元素来解决此问题。
每天，我通常只使用960gs，Twitter Bootstrap等框架进行布局，而不用担心确切的机制。
可以在这里阅读更多
http://www.webtoolkit.info/css-clearfix.html
clearfix与overflow:hidden相同。 父母的两个明显漂浮的孩子，但clearfix不会切断向parent溢出的元素。 它也适用于IE8及以上版本。
没有必要定义"." 在内容＆.clearfix中。 就像这样写：
.clr:after {
clear: both;
content: "";
display: block;
}
HTML
<div class="parent clr"></div>
阅读这些链接了解更多
http://css-tricks.com/snippets/css/clear-fix/，
我可以使用哪些“clearfix”方法？
链接地址: http://www.djcxy.com/p/87619.html