「overflow: hidden」により、フローティング要素を含むコンテナの高さが予期せず増加するのはなぜですか?

オーバーフロー: 浮動要素の非表示および予期しない高さの増加

質問:
オーバーフロー: 非表示の場合フローティング要素を含む外側要素に適用すると、外側要素の高さが予想外に大きくなり、フロート要素が含まれるのはなぜですか

答え:
オーバーフロー: 非表示によって新しいブロック フォーマット コンテキスト (BFC) が作成されるため、高さが予期せず増加します。表示されないオーバーフローのある要素を含む BFC ルートは、高さが指定されていない場合、浮動小数点を収容するために高さを拡張します。

CSS 仕様によると、ブロックの書式設定コンテキスト ルートは「含まれるように拡張されます」それら自体に高さが指定されていない場合は、高さによって浮動小数点数が設定され、デフォルトは自動になります。」この高さの増加は、下マージン エッジが BFC ルートの下コンテンツ エッジを超えるフローティング子孫にも適用されます。

フロートのクリアとの違い
この動作は、フロート クリアランスとは異なることに注意してください。これは、clear プロパティが適用され、先行するフロートがクリアされる場合に発生します。この場合:

• BFC ルートの外側の要素で clear: を両方とも使用すると、フロートはクリアされますが、外側の要素は伸縮しません。
• 高さゼロの要素を次のように配置します。クリア: BFC ルートの内側の両方で、フローティング要素 (として知られる) の下端を収容するために外側の要素が下方に伸びることが保証されます。 "クリアフィックス").

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