html - 使用 div :after 清除元素

Question

在寻找 this question 的解决方案时，我试图用 :after 伪类添加一个清除元素。它做了我想要的，但不是出于我预期的原因 - 在缩小范围后我发现定义以下内容会清除元素:

.right_field > div:after
{
    content: "style=\"foo\"";
}

我希望它做的是将文本 style="foo" 附加到 .right_field 内的 div 元素的末尾>，但它不会添加任何视觉元素，而是会清除元素，以便它们环绕 float 的子元素。

请参阅以下 fiddle 进行演示。尝试从 content 属性中删除 foo ，看看它如何不再清除元素，而只是将文本附加到每个元素。 http://jsfiddle.net/dNJxd/5/

为什么会发生这种情况，这是一个值得信赖的功能吗？我在 Chrome、Firefox 和 IE7-9 上对其进行了测试，它们的工作方式都相同。

Answer 1

您的示例确实在 div 元素之后附加了文本 style="foo"。唯一不会这样做的浏览器(从您的测试浏览器列表中)是 IE7，因为它不支持 ::after 伪类。

也许你需要拉伸(stretch)你的JSFiddle result window再远一点。

此外，这不会清除 float - 它只是给父 div 一些高度，因为附加的文本没有 float 。当 div 的内容高度大于附加文本时，边框折叠仍然会发生。