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

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

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

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

.cf:after {
    clear:both;
}

我知道如何做到清晰：两者都有效，但我不确定

内容是如何做到的：“”；显示：表格修复了该问题。我有点猜到了，但有人能简单地向我解释一下吗

提前谢谢

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



编辑。谢谢大家。我不知道这叫做clearfix，难怪我一直在输入诸如：after:before之类的东西，比如用于float或类似的伪元素，但我找不到我需要的东西。但我不认为这个问题是双重的，因为我想问的是clearfix是如何工作的，而不是clearfix vs Float

感谢Prashant提供的链接~
添加
内容背后的真正原因：“；显示：表格到伪元素（：before，：after）是-->

：在
之前，伪元素创建一个匿名表单元格和一个新的块格式上下文。虽然这不是必需的，但这可以防止顶部边缘塌陷。要包含子元素的上边距，必须使用
表格
而不是
块

：在
之后，伪元素用于清除浮动。（
清除：两者；
）

资料来源：