这个CSS规则是什么意思？

Question

我注意到应用于“网格”div元素的CSS规则（见下文）。

.grid:after {
  content: "";
  display: table;
  clear: both;
}

它究竟意味着什么以及为什么需要它？

Answer 1

这是一种清除漂浮物的方法。这比在任何需要的地方添加clear类更好。通过这种方式，它将清除子项的浮点数（可能是浮动框架的列）。

之后将在grid的末尾添加此元素（因此在HTML中的所有子项之后）。这很酷！

Answer 2

:after是伪元素选择器。它定义了一个伪元素，该元素将呈现为.grid元素的最后一个子。 content属性定义了此伪元素的内容。

这个特殊的CSS就是所谓的 clear-fix 。

他们可能在.grid中有一些元素都是float: left。这会导致.grid 看起来像为空。所有这些元素都不是块元素，因此.grid有点看不到它们，这使得宽度和高度等于零。

解决此问题的一种古老的流行方法是添加空div作为.grid的最后一个元素

<div class="clr"></div>

有这样的风格

.clr {
    clear: both;
}

如今，由于我们拥有 CSS伪元素这样美妙的功能，我们可以省去DOM，只需添加你在问题中提到的那三行CSS。

:after和:before伪元素作为W3 CSS3 specification的一部分引入。我们喜欢他们和大多数浏览器support them。