clearfix类在CSS中做什么？

Question

我已经看到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

Answer 1

浮子如何工作

当页面上存在浮动元素时，非浮动元素 将包裹在 浮动元素 周围 ，类似于文本在报纸上围绕图片的方式。从文档的角度（HTML 的 原始目的
）来看，这就是浮动的工作方式。

float 与 display:inline

在发明之前display:inline-block，网站用于float将元素彼此并排设置。相对于后者float更可取，display:inline因为后者不能设置元素的尺寸（宽度和高度）以及垂直填充（顶部和底部），因为浮动元素被视为块元素，所以浮动元素可以做到。

浮动问题

主要问题是我们正在使用float其预期目的。

另一个是，尽管float允许并排放置块状元件，但 浮子不会为其容器赋予形状
。就像position:absolute，其中元素“从布局中取出”。例如，当一个空容器包含一个浮动的100px x
100px时<div>，<div>不会为该容器赋予100px的高度。

与不同position:absolute，它会影响周围的内容。浮动元素之后的内容将“环绕”元素。它从在其旁边渲染然后在其下面渲染开始，就像报纸文本在图像周围的流动方式一样。

抢救的Clearfix

什么 clearfix 确实是彩车或含彩车来呈现它下面的容器后力的内容。clear-fix有很多版本，但它的名称来自常用的版本-
使用CSS属性的版本clear。

例子

根据浏览器和用例，有几种方法可以执行clearfix。只需知道如何clear在CSS中使用该属性以及如何在每个浏览器中进行浮点渲染，即可实现完美的跨浏览器清除修复。

你有什么

您提供的样式是具有向后兼容性的clearfix形式。我找到了有关此clearfix的文章](。事实证明，这是一个旧的clearfix-仍然适合旧的浏览器。文章中也有一个更新，更干净的版本。细目如下：

• 您拥有的第一个clearfix clear:both在目标元素和下一个元素之间追加了一个样式为的不可见伪元素。这将迫使伪元素在目标下方进行渲染，而下一个元素在伪元素下方进行渲染。

• 第二个追加了display:inline-block以前的浏览器不支持的样式。inline-block类似于inline，但是为您提供了一些可阻止元素的属性，例如宽度，高度以及垂直填充。这是针对IE-MAC的。

• display:block由于上述IE-MAC规则，这是重新应用。该规则是IE-MAC中“隐藏”的。

总而言之，这3条规则可以确保.clearfix跨浏览器正常工作，并牢记旧的浏览器。