html - 清除同一元素中的浮动

Question

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

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

这与清除浮动有关，但问题是我不能使用容器或添加 clear:both 在 html 布局中的 p.test 之后（再次 - 这是因为使用了 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;
}

score 5 · Accepted Answer

您将clear: left第一个不想冒泡的元素放在浮动元素旁边。

.test + * { clear: left; }

或者……因为它有一个固定的宽度，所以一开始就不要浮动.test。

score 1 · Accepted Answer

大多数兼容性：http: //jsfiddle.net/6AW2p/

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

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

score 0 · Accepted Answer

在我看来，你一开始就不应该漂浮。

.test {
    width: 60%;
}

3 回答 3