Question

我有给定宽度的p.test和float：left。这个div只占全宽的一半。因此，如果我在p.test之后创建下一个元素，它将与p.test一起到达同一行。我使用的是p而不是div，因为这与tinymce的工作人员有关，在我的方案中div不能使用。

我想写一个CSS规则：“即使p.test没有占据100％的宽度并向左浮动，p.test之后的所有内容都会在下一行开始。” /强>

这与清除浮动有关，但问题是我不能使用容器或添加清除：在html布局中的p.test之后（再次 - 这是因为使用了tinymce编辑器）。我需要纯粹的CSS解决方案，这是为“p.test”元素或“p.test旁边的元素”做的。也许还有其他一些，我不确定。

<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%;
}

清除漂浮在同一元素中

3 个答案: