clearfix类在css中做什么？
我已经看到div标签使用clearfix类时，它的子divs使用float属性。 clearfix类看起来像这样：
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { display: inline-block; } .clearfix { display: block; }
我发现，如果我不使用clearfix当我使用bottom-border属性，边框将显示在子divs之上。 有人可以解释clearfix类是干什么的吗？ 另外，为什么有两个display属性？ 这对我来说似乎很奇怪。 我特别好奇什么content:'.' 手段。
谢谢，G
如何漂浮工作
当页面上存在浮动元素时，非浮动元素环绕浮动元素，类似于文本在报纸中的图片周围。 从文档的angular度来看（HTML的原始目的 ），这就是浮动的工作原理。
float VS display:inline
display:inline-block发明前display:inline-block ，网站使用float来设置元素彼此相邻。 float优于display:inline因为使用后者，不能设置元素的尺寸（宽度和高度）以及垂直填充（顶部和底部） – 浮动元素可以执行的操作，因为它们被视为块元素。
浮动问题
主要的问题是，我们正在使用float预期的目的。
另一个是虽然float允许并排的块级元素，但浮动不赋予其容器形状 。 这就像是position:absolute ，元素被“取出布局”。 例如，当一个空的容器包含一个浮动的100px x 100px <div> ， <div>不会将100px的高度赋予容器。
与position:absolute不同，它会影响周围的内容。 浮动元素之后的内容将“包裹”元素。 它开始在旁边渲染，然后在下面渲染，就像报纸文字如何在图像周围stream动一样。
Clearfix来拯救
clearfix所做的就是强制浮动内容或包含浮动的容器在其下面呈现内容。 clear-fix有很多版本，但是它的名字来自通常使用的版本 – 使用CSS属性clear 。
例子
根据浏览器和用例， 以下是几种执行clearfix的方法 。 我们只需要知道如何在CSS中使用clear属性，以及如何在每个浏览器中呈现浮动，以便实现完美的跨浏览器清除。
你有什么
您提供的样式是向后兼容的clearfixforms。 我find了关于这个clearfix 的文章 。 事实certificate，这是一个旧的clearfix – 仍然迎合旧的浏览器。 文章中还有一个更新，更干净的版本。 这是细节：
-
你有第一个clearfix附加一个不可见的伪元素，这是
clear:both风格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像素高。 如果您使用这些容器来构build布局，这会导致很多奇怪的小怪癖。
所以各种框架使用的clearfix类通过使父容器“确认”包含的元素来解决这个问题。
每天，我通常只是使用框架，如960gs，Twitter Bootstrap进行布局，而不是打扰到确切的机制。
可以在这里阅读更多
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”方法？
