前后伪元素如何修复浮动？ [复制]答案

【问题标题】：How does Pseudo-elements before and after to fix floats? [duplicate]前后伪元素如何修复浮动？ [复制]
【发布时间】：2014-09-04 12:21:10
【问题描述】：

我有一个 div，其中包含一些缩略图和一些使用浮动的图像。但是使用浮动背景图像/颜色会缩小，因为图像浮动所以没有背景图像/颜色的内容，除非我修复背景图像/颜色的长度和宽度。

然后我在网上发现通过使用此代码我的问题得到了解决。

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear:both;
}

我知道 clear:both 是如何工作的，但我不确定content: " "; display: table; 是如何解决问题的。我有点猜到了，但有人可以简单地向我解释一下吗？

提前致谢。

我添加了两张图片以防我的错误解释难以理解。

编辑。谢谢人们。不知道这被称为 clearfix 难怪我一直在输入诸如 :after :before 用于浮点数或类似的伪元素之类的东西，但我找不到我需要的东西。但我不认为这个问题是一个双重问题，因为我想问的是 clearfix 是如何工作的，而不是 clearfix vs floats。

感谢 Prashant 的链接~

【问题讨论】：

【解决方案1】：

将content: " "; display: table; 添加到伪元素(:before ,:after) 背后的真正原因是--->

:before 伪元素创建一个匿名表格单元和一个新的块格式化上下文。虽然这不是必需的，但这可以防止顶部利润崩溃。必须使用table 而不是block 来包含子元素的上边距。

:after 伪元素用于清除浮动。（clear: both;）

【讨论】：