1

要素をフローティングした結果が、後続の他の要素ではなく、後続の兄弟にのみ影響するようにするにはどうすればよいですか?

浮動兄弟によって作成された列の下に通常レンダリングされる他の (兄弟ではない) ブロックレベル要素を意味します。

4

1 に答える 1

3

フロートの親の兄弟にクリアするように伝える必要があります。親に 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 プレビュー

float の子孫はフローティングに干渉してはならないため、それらの float の子孫にクリアするように指示する必要はありません。ここで唯一懸念されるのは、float の兄弟ではない次の要素です。

于 2013-02-06T07:55:35.533 に答える