33

この質問は、次の HTML を使用して、この fiddleで最もよく説明されています。

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

CSS:

.outer {
    width: 100px;
    border: solid 5px #000;
}
.inner-left {
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;
}
.inner-right {
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;
}

overflow: hidden基本的に、2 つの浮動要素を取り囲んで、外側の要素の高さが増加するのはなぜでしょうか?

4

2 に答える 2

41

最も簡単に言えば、そうでoverflowないvisible(デフォルト) を持つブロック ボックスが、新しいブロック フォーマット コンテキストを作成するためです。

新しいブロック フォーマット コンテキストを作成するボックスは、高さが指定されていない場合、高さによってフロートを含むautoように拡張されるように定義されます(仕様では、これらのボックスはブロック フォーマット コンテキスト ルートと呼ばれます)。

10.6.7 ブロック整形コンテキストルートの「自動」高さ

場合によっては (たとえば、上記のセクション 10.6.4 および 10.6.6 を参照)、ブロック フォーマット コンテキストを確立する要素の高さは次のように計算されます。

[...]

さらに、要素の下部マージンの端が要素のコンテンツの下部の端よりも下にある浮動子孫が要素にある場合、高さはそれらの端を含むように増加されます。このブロック フォーマット コンテキストに参加する float のみが考慮されます。たとえば、絶対配置された子孫内の float や他の float は考慮されません。

これは元の CSS2 仕様には当てはまりませんでしたが、別の (そしてより差し迫った) 問題への対応として CSS2.1 の変更として導入されました。この回答は、変更の説明を提供します。このため、変更は非常に意図的なものでしたが、副作用と呼ぶのが非常に適切です。

また、これはフロートのクリア( clear ) と同じではないことに注意してください。フロートのクリアは、プロパティを使用し、クリアする前のフロートがある場合にのみ発生します。clear

  • 例の外側の要素の兄弟である要素がある場合clear: both、フロートはクリアされますが、外側の要素は伸びません。

  • 代わりに、外側の要素の最後の子として同様の要素 (または疑似要素) がある場合 (それをfloatの次の兄弟にする)、外側の要素はその要素の下端を含むために下に引き伸ばされます。基本的にフロートの最下端を意味する高さゼロの要素の場合。この手法は「clearfix」として知られています。これは、エレメント (または疑似エレメント) が外側のエレメントにその内部のクリアランスによってフロートを強制的に含める以外の目的がないためです。

于 2012-10-08T13:50:00.717 に答える
2

私が生徒に説明する方法は次のとおりです。

フロートを含む要素をトリガーして、「多すぎるものはすべて表示しないでください」と伝えます。これにより、要素は多すぎるコンテンツを探し、フロートしている要素をいくつか見つけることができます。彼はそれらを収容する必要があります。

于 2012-10-08T14:44:02.180 に答える