这个问题在这里已有答案：
我已经看到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
当页面上存在浮动元素时，非浮动元素会环绕浮动元素，类似于文本围绕报纸中图片的方式。从文档的角度来看（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的作用是在浮点数或包含浮点数的容器在其下方渲染之后强制内容。有很多版本用于clear-fix，但它的名字来自通常使用的版本 - 使用CSS属性clear的版本。
Here are several ways to do clearfix，取决于浏览器和用例。人们只需要知道如何在CSS中使用clear属性以及如何在每个浏览器中呈现浮点数，以实现完美的跨浏览器清除修复。
您提供的样式是clearfix的一种形式，具有向后兼容性。 I found an article关于这个clearfix。事实证明，这是一个旧的clearfix - 仍然迎合旧的浏览器。文章中还有一个更新，更清洁的版本。这是细分：
clear:both。这会强制伪元素渲染到目标下方，并强制伪元素下面的下一个元素。display:inline-block。内联块就像内联，但为您提供了一些阻止元素的属性，如宽度，高度以及垂直填充。这是针对IE-MAC的。display:block的重新应用。这个规则是从IE-MAC“隐藏”的。总而言之，这三条规则使.clearfix能够跨浏览器工作，并考虑到旧的浏览器。
当一个元素，如div是floated时，其父容器不再考虑其高度，即
<div id="main">
<div id="child" style="float:left;height:40px;"> Hi</div>
</div>
默认情况下，父容器的高度不会是40像素。如果您使用这些容器来构建布局，这会导致许多奇怪的小怪癖。
因此，各种框架使用的clearfix类通过使父容器“确认”包含的元素来修复此问题。
每天，我通常只使用960gs，Twitter Bootstrap这样的框架进行布局，而不是使用精确的机制。
可以在这里阅读更多
clearfix与overflow:hidden相同。两个明确浮动的父母的孩子，但clearfix将不会切断溢出到它的parent的元素。它也适用于IE8及以上版本。
没有必要在内容和.clearfix中定义"."。就像这样写：
.clr:after {
clear: both;
content: "";
display: block;
}
HTML
<div class="parent clr"></div>
阅读这些链接了解更多信息