我见过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
当页面上存在浮动元素时，非浮动元素wrap around为浮动元素，类似于文本如何围绕报纸中的图片.从文档的Angular (HTML的original purpose)来看，这就是浮动的工作方式.
float vs display:inline在display:inline-block发明之前，网站使用float来将元素放在一起.float比display:inline更好，因为使用display:inline，您不能设置元素的尺寸(宽度和高度)以及垂直填充(顶部和底部)-这是浮动元素可以做的，因为它们被视为挡路元素.
主要问题是我们使用了float，这违背了它的预期目的.
另一个是，虽然float%允许并排使用挡路级别的元素，但floats do not impart shape to its container%.它类似于position:absolute，其中元素被"从布局中移除".例如，当一个空的容器包含一个浮动的floatpx x floatpx <div>时，<div>将不会赋予该容器floatpx的高度.
与position:absolute不同的是，它会影响其周围的内容.浮动元素之后的内容将"环绕"该元素.它首先在它旁边渲染，然后在它下面渲染，就像报纸文本如何围绕图像流动一样.
clearfix所做的是强制内容在浮点之后或包含浮点的容器渲染到其下方.Clear-fix有很多版本，但它的名字来源于常用的版本-使用CSS属性clear的版本.
Here are several ways to do clearfix，具体取决于浏览器和用例.你只需要知道如何在CSS中使用clear属性，以及浮动如何在每个浏览器中渲染，就可以实现完美的跨浏览器清晰修复.
您提供的样式是一种具有向后兼容性的清晰修复形式.大约I found an article美元，这是一个清晰的解决方案.事实证明，这是一个旧的清晰修复-仍然迎合旧的浏览器.在这篇文章中也有一个更新、更干净的版本.以下是细目:
第一个clearfix在目标元素和下一个元素之间附加了一个不可见的伪元素，样式为clear:both.这将强制伪元素在目标下方渲染，并强制下一个元素在伪元素下方渲染.
第二个附加了早期浏览器不支持的样式display:inline-block.内联-挡路类似于内联，但提供了一些挡路元素的属性，比如宽度、高度和垂直填充.这是针对IE-MAC的.
由于上面的IE-MAC规则，这是display:block的重新apply.此规则对IE-MAC"隐藏".
总而言之，这3条规则让.clearfix个可以跨浏览器工作的人牢记旧浏览器.