「overflow: hidden」によってフローティングされた子を持つ親コンテナの高さが増加するのはなぜですか?

謎を明らかにする: オーバーフローの理由: 高さ拡張が隠れたトリガーになる

CSS の領域では、オーバーフロー プロパティによって動作が大幅に変更される可能性があります。特定の視覚的要素。ただし、予期しない副作用の 1 つは、float 要素と組み合わせて使用​​すると、外側の要素の高さが増加する機能です。

この現象を理解するには、ブロック フォーマット コンテキスト (BFC) の複雑さを詳しく調べる必要があります。オーバーフロー: 非表示は、BFC の作成をトリガーします。BFC は、内部要素を収容し、動作に影響を与えるコンテナです。

この効果を理解する上で重要なのは、「ブロック フォーマット コンテキスト ルート」の概念です。これらは、明示的な高さのない BFC 内のブロック ボックスです (デフォルトでは自動)。このようなボックス内にフロートが存在する場合、仕様では、フローティングされた子孫を囲むようにボックスが垂直方向に拡張することが規定されています。

この動作は、別の問題に対処することを目的とした CSS2.1 の変更に起因します。ただし、この例では、フロート要素を収容するために外側の要素が拡張するという副作用が発生します。

明確にするために、この効果は、フロート クリアランスにクリア プロパティを使用することとは異なります。 Clearance は先行するフロートを排他的にクリアします。外側の要素の高さには直接影響しません。ただし、外側の要素内で Clear を使用すると、フローティング要素の後続の兄弟としてのステータスの結果として、高さの拡張がトリガーされる可能性があります。 「clearfix」として知られるこの手法は、高さゼロの要素を利用して強制的にフロートを封じ込め、その後コンテナを拡張します。

以上が「overflow: hidden」によってフローティングされた子を持つ親コンテナの高さが増加するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。