我已经看到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属性时不使用，边框会显示在 child 上方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。
这里有几种方法来做 clearfix，取决于浏览器和用例。只需知道如何clear在 CSS 中使用该属性以及浮动在每个浏览器中如何呈现，即可实现完美的跨浏览器清除修复。
您提供的样式是一种具有向后兼容性的 clearfix 形式。我找到了一篇关于这个 clearfix 的文章。事实证明，这是一个旧的 clearfix - 仍然为旧浏览器提供服务。文章中还有一个更新、更简洁的版本。这是细分：
clear:both您拥有的第一个 clearfix在目标元素和下一个元素之间附加了一个不可见的伪元素，它是 styled 。这会强制伪元素在目标下方呈现，并在伪元素下方呈现下一个元素。
第二个附加了display:inline-block早期浏览器不支持的样式。inline-block 与 inline 类似，但为您提供了一些阻止元素的属性，如宽度、高度以及垂直填充。这是针对 IE-MAC 的。
这是display:block由于上述 IE-MAC 规则的重新应用。此规则对 IE-MAC “隐藏”。
总而言之，这 3 条规则保持了.clearfix跨浏览器的工作，同时考虑到旧的浏览器。
当一个元素，比如 a divisfloated时，它的父容器不再考虑它的高度，即
<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>
阅读这些链接了解更多信息