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

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 预览

您不必告诉这些浮动的后代清除，因为浮动的后代永远不应该干扰浮动。这里唯一需要关注的是跟随不是浮动的兄弟的元素。