关于clearfix如何实际工作的困惑

Question

如果在容器元素中有浮动元素，则需要将容器设置为overflow auto或在浮动元素后添加clear both。

当您清除容器中的浮动元素时，这是有道理的。

然而，当使用clearfix CSS技巧时，你在容器之后进行清除而不是在浮动元素之后......我很困惑这是如何工作的，因为你现在正在清理容器而不是浮动所以它肯定会导致容器的高度不正确吗？因为如果我把容器clear both放在一个物理元素之后它就行不通，那为什么它可以用:after ??

任何人都可以解释这个吗？感谢

示例：

<div style="border:#000 1px solid;padding:10px;">
    <div style="width:100px;height:100px;background:blue;float:left;"></div>
</div>
<div style="clear:both;"></div>

这不起作用，但不是clearfix几乎可以做到的吗？

Answer 1

CSS :after伪元素的意思是“在元素的内容之后，但仍然在元素内部”，而不是“在元素本身之后”。这就是它运作的原因。

mozilla documentation描述如下：