Question

如何使浮动元素的结果只影响其后续兄弟，而不影响其他后续元素？

我的意思是其他（不是兄弟）跟随在浮动的兄弟姐妹创建的那些列下正常呈现的块级元素。

Answer 1

你必须告诉兄弟姐妹的花车的父母要清除。您可以使用父级的clearfix或直接向父级的直接兄弟应用clear来执行此操作。

例如，如果你有这样的结构：

<div class="parent">
    <div>Float</div>
    <div>Float, following sibling</div>
    <div>Float, following sibling</div>
</div>
<div>Outside of .parent</div>
<div>Outside of .parent</div>

使用这个CSS：

.parent div {
    float: left;
}

您可以通过告知第一个元素清除来防止浮动影响外部元素：

.parent + div {
    clear: both;
}

jsFiddle preview

你不必告诉那些花车的后代要清除，因为花车的后代应该从不干扰浮动。这里唯一关注的是跟随浮点数不是兄弟的元素。

如何使浮动元素的结果只影响其后续兄弟，而不是其他后续元素？

1 个答案: