我看到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
答案 0 :(得分：122)
当页面上存在浮动元素时，非浮动元素环绕浮动元素，类似于文本围绕报纸中图片的方式。从文档的角度来看（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 - 仍然迎合旧的浏览器。文章中还有一个更新，更清洁的版本。这是细分：
第一个clearfix在目标元素和下一个元素之间附加了一个不可见的伪元素，其样式为clear:both。这会强制伪元素渲染到目标下方，并强制伪元素下面的下一个元素。
第二个附加了早期浏览器不支持的样式display:inline-block。内联块就像内联，但为您提供了一些阻止元素的属性，如宽度，高度以及垂直填充。这是IE-MAC的目标。
由于上面的IE-MAC规则，这是display:block的重新应用。这条规则是从IE-MAC“隐藏”的。
总而言之，这3条规则使.clearfix跨浏览器工作正常，并考虑旧浏览器。
答案 1 :(得分：18)
当某个元素（例如div为floated）时，其父容器不再考虑其高度，即
<div id="main">
<div id="child" style="float:left;height:40px;"> Hi</div>
</div>
默认情况下，父容器的高度不会是40像素。如果您使用这些容器来构建布局，这会导致许多奇怪的小怪癖。
因此，各种框架使用的clearfix类通过使父容器“确认”包含的元素来修复此问题。
日复一日，我通常只使用960gs，Twitter Bootstrap这样的框架进行布局，而不是打扰精确的机制。
可在此处阅读更多内容
答案 2 :(得分：7)
clearfix与overflow:hidden相同。两个明确浮动的父级子项，但clearfix不会切断溢出到它的parent元素。
它也适用于IE8＆amp;上方。
无需在内容和广告中定义"." .clearfix。就像这样写：
.clr:after {
clear: both;
content: "";
display: block;
}
<强> HTML
<div class="parent clr"></div>
阅读这些链接了解更多信息