2

display: inline-blockは多くの clearfix で使用されています ( 1、2 ) が、これらの記事のどれも、それが要素をそれ自体の後に明確にする理由を説明していません。なぜそうなのですか？

私は仕様に目を通しましたが、その問題に関する決定的な説明は見つかりませんでした。

この例は、問題の動作を示しています (IE9、および Chrome と Firefox の最新バージョンで一貫しています)。

ここに画像の説明を入力

<div style="display: inline-block;">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
</div>

<hr/>

<div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
</div>
4

1 に答える 1

4

インライン ブロック要素は、そのコンテンツの新しいブロック フォーマット コンテキストを確立します。ブロック フォーマッティング コンテキスト ルートは、サイズが自動的に変更された場合、常に float を含めようとします。仕様のセクション 10.6.7を参照してください。

さらに、要素の下部マージンの端が要素のコンテンツの下部の端よりも下にある浮動子孫が要素にある場合、高さはそれらの端を含むように増加されます。

これにより、インライン ブロックに float を含めることができます。フローティングの子の後にクリア要素が導入されないため、クリアランスは実際には関与しません。

于 2013-11-12T16:51:24.773 に答える