Css 使用：：after自动清除div。这样行吗？

我有以下HTML：

<div class="selfClear" style="float: left; border: 1px solid black;">
      ...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>

然而，这并不是我认为它应该做的。如果我没有包括高度/可见性样式，以便在插入期间可以实际看到它，我会看到它实际上是在div内部（黑色边框包围它），而不是在div之后渲染（因此它位于div和span之间）。我是否误解了这应该是如何工作的

编辑：

下面是一个简单的例子：

CSS:

HTML:

你好
世界

最后在“Hello”之后加上句号，而不是在div之后

---

似乎

：：after

和

：：before

实际附加到元素的内容，而不是元素本身。这是正确的吗？

我建议使用clearfix-它简单得多，您只需使用clearfix类设置一个surronding

---

看

是，它附加到所选元素的内容。您可以尝试包装div，然后在包装div之后追加，但这首先破坏了使用：after的全部目的。

您也可以尝试将封闭div设置为“overflow:auto”。这在任何地方都有效。

的确如此！我得说他们给这个取了个坏名字。它应该被正确地称为afterContent或其他东西这几乎是一样的，但是有一个包装器元素，对吗？因此，如果我要添加更多HTML，我最好使用旧的回退“empty div”设置为clear。这很好。我只是希望有一个以CSS为中心的方法。

.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}   
.selfClear {
    display: inline-block;
}

#theDiv {
border: 1px solid green;
}

#theDiv::after {
content: ".";
}   

#theOtherDiv {
border: 1px solid orange;
}

<div id="theDiv">
    Hello
</div>
<div id="theOtherDiv">
   World
</div>