子がフローティングされているときに、親 Div が高さ 0 に折りたたまれるのはなぜですか?

フローティングされた子を持つ親 Div の高さがゼロであることを理解する

CSS では、div にフロートされた子が含まれる場合、親 div が発生することがあります。高さがゼロであること。コンテンツがページ上に正しくレンダリングされているように見えることを考えると、この現象は複雑に見えるかもしれません。

その説明は CSS レイアウト モデルにあります。提供されている HTML サンプルの「.content」および「.lbar」 div のようなフローティング コンテンツは、ドキュメントの通常のフローから削除され、それに続くコンテンツの横に配置されます。これは、フローティング コンテンツがそのコンテナ div の高さに影響を与えなくなることを意味します。

非フローティング コンテンツが存在しない場合、親 div ("#wrapper") には、その高さに寄与する要素が含まれません。その結果、子がページ上に表示される場合でも、高さ 0px に折りたたまれます。

この問題に対処し、親 div が表示されたままになるようにするために、開発者は次のような手法を使用できます。

• オーバーフロー非表示: 親 div に「overflow: hidden」を設定すると、新しいブロック フォーマット コンテキストが確立され、div が強制されます。
• 非フローティング コンテンツ: テキスト ノードやクリア要素などの非フローティング コンテンツを親 div 内に追加します。 div はそのコンテンツに基づいて高さを確立できます。

この動作を理解することでフラストレーションを防ぎ、開発者は予期せぬことなく目的のレイアウトを効果的に作成できるようになります。身長の問題

以上が子がフローティングされているときに、親 Div が高さ 0 に折りたたまれるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。