清除同一元素中的浮动

Question

我有给定宽度和float：left的p.test。 该div仅占全宽的一半。 因此，如果我在p.test之后创建了下一个元素，它将与p.test在同一行。 我使用p而不是div，因为这与tinymce人员有关，并且在我的场景中div无法使用。

我想写一个CSS规则：“即使p.test不占用宽度的100％并向左浮动，p.test之后的所有内容也会从下一行开始。”

这与清除浮点数有关，但问题是我无法使用容器或在HTML布局中的p.test之后都添加clear :（同样，这是因为使用了tinymce编辑器）。 我需要纯粹针对“ p.test”元素或“ p.test旁边的元素”完成的CSS解决方案。 也许还不确定，我不确定。

<p class="test"></p>
<p>Element that should be on the next line whatever it is</p>


.test {
    width: 60%;
    float: left;
}

Answer 1

您clear: left在第一个元素上，您不希望在浮动元素旁边冒泡。

.test + * { clear: left; }

或…因为它的宽度是固定的，所以不要首先浮动.test 。

Answer 2

最高兼容性： http : //jsfiddle.net/6AW2p/

p.test {
    width: 40%;
    float: left;
    background-color:red;
    clear:none;
}
.test + * {clear:left;} 

CSS3 ：（不支持IE 8） http://jsfiddle.net/6AW2p/1/

p.test {
    width: 40%;
    float: left;
    background-color:red;
}
.test + :not(.test){clear:left;} /* CSS3 -- Does not support IE 8 */

Answer 3

对我来说听起来并不像您应该先浮动。

http://jsfiddle.net/isherwood/wpBN4/

.test {
    width: 60%;
}