我看到div 标签使用clearfix 类，而它是子类divs 使用float 属性。 clearfix 类如下所示：
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
我发现如果我在使用bottom-border 属性时不使用clearfix，边框会显示在子divs 上方。有人可以解释 clearfix 类的作用吗？另外，为什么有两个display 属性？这对我来说似乎很奇怪。我特别好奇content:'.' 是什么意思。
谢谢，G
【问题讨论】：
当页面上存在浮动元素时，非浮动元素环绕浮动元素，类似于报纸中文字环绕图片的方式。从文档的角度来看（HTML 的最初目的），这就是浮动的工作原理。
float 与 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，早期浏览器不支持。 inline-block 与 inline 类似，但为您提供了一些阻止元素的属性，例如宽度、高度以及垂直填充。这是针对 IE-MAC 的。
这是 display:block 由于上述 IE-MAC 规则的重新应用。这条规则被 IE-MAC “隐藏”了。
总而言之，这 3 条规则使 .clearfix 能够跨浏览器工作，同时考虑到旧浏览器。
【讨论】：
display:block 不会在所有浏览器上覆盖display:inline-block，包括那些支持inline-block 的浏览器？
<div class="clearfix"></div> 以模拟:after 的“空白内容”。这适用于旧版浏览器。
height:0 和visibility:hidden，您不会真正看到它。除了清除之外，它不会在设计中赋予任何东西。
当一个元素，比如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 及更高版本。
无需在 content & .clearfix 中定义"."。就这样写吧：
.clr:after {
clear: both;
content: "";
display: block;
}
HTML
<div class="parent clr"></div>
阅读这些链接了解更多
【讨论】：