修复浮动之前和之后的伪元素如何？

Question

我有一个包含一些缩略图的div，并且包含一些使用浮点数的图像。 但是使用浮动背景图像/颜色会缩小，因为图像浮动，因此除非我修复背景图像/颜色的长度和宽度，否则背景图像/颜色没有内容。

然后我在网上发现，通过使用这段代码我的问题就解决了。

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

.cf:after {
    clear:both;
}

我知道如何清楚：两者都有效，但我不确定content: " "; display: table;是如何解决问题的。我猜对了，但有人可以简单地向我解释一下吗？

提前致谢。

我添加了两张图片，以防我的不良解释难以理解。

编辑。谢谢大家。我不知道这被称为clearfix，难怪我继续输入类似的东西：之后：在浮动或类似的伪元素之前，我无法找到我需要的东西。但我不认为这个问题很复杂，因为我想问的是clearfix是如何工作的，而不是clearfix vs floats。

感谢Prashant的链接〜

Answer 1

将content: " "; display: table;添加到伪元素（：before，：after）背后的真正原因是---＆gt;

:before pseudo-element创建一个匿名表格单元格和一个新的块格式化上下文。虽然这不是必要的，但这可以防止利润率最高的崩溃。使用table而不是block是必要的，以包含子元素的上边距。

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

来源：http://nicolasgallagher.com/micro-clearfix-hack/