用div清除元素：after

Question

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

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

我期望它做的是将文本style="foo"附加到div内的.right_field元素的末尾，但是它不会添加任何视觉效果并清除元素，以便他们环绕着漂浮的孩子们。

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

为什么会发生这种情况，这是一个可以依靠的功能吗？我在Chrome，Firefox和IE7-9上进行了测试，它们的工作方式相同。

Answer 1

您的示例会在style="foo"元素后附加文本div。唯一不会这样做的浏览器（来自您的测试浏览器列表）是IE7，因为它不支持::after伪类。

也许您需要进一步延长JSFiddle result window。

此外，这不会清除浮点数 - 它只是给父div一些高度，因为附加的文本没有浮动。当div的内容高度高于附加文本时，仍会出现边框折叠。