关于html：clearfix类在css中做了什么？

What does the clearfix class do in css?

本问题已经有最佳答案，请猛点这里访问。

我见过div标记使用clearfix类，而它的子级divs使用float属性。ClearFix类如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13

.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将元素设置在一起。与display:inline相比，float更受欢迎，因为后者不能设置元素的尺寸(宽度和高度)以及垂直填充(顶部和底部)，浮动元素可以这样做，因为它们被视为块元素。

浮点问题

主要问题是，我们使用的float违背了它的预期目的。

另一个问题是，虽然float允许并行块级别的元素，但浮动不会赋予容器形状。就像position:absolute中的元素"从布局中取出"。例如，当空容器包含浮动的100px x 100px 时，不会将100px的高度赋予容器。

与position:absolute不同，它会影响围绕它的内容。浮动元素之后的内容将"环绕"元素。它首先在它旁边渲染，然后在它下面渲染，就像报纸文本围绕图像流动一样。

Clearfix救援

ClearFix所做的是强制在浮动之后或包含浮动的容器在其下方呈现内容。clear fix有很多版本，但它的名字来自于常用的版本——使用css属性clear的版本。

实例

根据浏览器和用例的不同，这里有几种执行ClearFix的方法。我们只需要知道如何使用CSS中的clear属性，以及如何在每个浏览器中呈现浮动，以实现完美的跨浏览器清除修复。

你有什么

您提供的样式是一种具有向后兼容性的ClearFix形式。我找到一篇关于这个ClearFix的文章。事实证明，这是一个旧的ClearFix——仍然迎合旧的浏览器。文章中还有一个更新、更清晰的版本。下面是细目：

第一个clearfix在目标元素和下一个元素之间附加了一个不可见的伪元素，它被命名为clear:both。这将强制伪元素在目标之下呈现，并强制伪元素之下的下一个元素呈现。
第二个附加了早期浏览器不支持的样式display:inline-block。inline块与inline类似，但提供了一些阻止元素的属性，如宽度、高度和垂直填充。这是针对IE-Mac的。
这是由于上述ie-mac规则而重新应用display:block。这条规则对IE-Mac是"隐藏"的。

总而言之，这3条规则使.clearfix能够跨浏览器工作，同时考虑到旧的浏览器。