「overflow: hidden」が浮動子を持つ親要素の高さを拡張するのはなぜですか?

オーバーフロー: 浮動子による非表示および要素の高さの拡張

驚くべき工夫として、外側の要素にオーバーフロー: 非表示を設定すると、オーバーフローが発生する可能性があります。浮動子要素を収容するために高さを大きくします。その理由を理解するために、ブロック フォーマット コンテキストの概念を詳しく見てみましょう。

オーバーフローが非表示値 (非表示など) に設定されたブロック要素に遭遇すると、新しいブロック フォーマット コンテキストが確立されます。重要なのは、ブロックの書式設定コンテキスト ルート (これらの要素と呼ばれる) は、明示的な高さが設定されていない場合、フロートされた子孫を含むために垂直に伸びることが期待されます。

この動作は、CSS2 で導入されたリビジョンに起因します。 1 別の問題に対処します。この変更により、float の下端がその包含ブロック (親) に含まれるクリアランスの概念が効果的に拡張され、高さが指定されていないブロック フォーマット コンテキスト ルートに適用されます。

提供された例では、外側の要素overflow: hidden に設定され、新しいブロック書式設定コンテキストの作成がトリガーされます。外側の要素には指定された高さがないため、デフォルトで自動になり、フローティングされた内側の要素を囲むように下に伸びます。

この現象をフロートのクリアランスと区別することが重要です。クリアランスは、clear: Both または同様の効果を持つ要素が先行するフロートをコンテナの上部に強制的に移動させるときに発生します。対照的に、フロートを含むブロック フォーマット コンテキスト ルートのオーバーフローは、そのコンテキスト内でのみ発生し、コンテキスト外の要素には影響しません。

以上が「overflow: hidden」が浮動子を持つ親要素の高さを拡張するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。