ホームページ >ウェブフロントエンド >CSSチュートリアル >フローティングされた子を持つ親 Div の高さがゼロになるのはなぜですか?
フローティングされた子を持つ親 Div の高さを理解する
Web デザインのコンテキストでは、div コンテナーの高さは影響を受ける可能性がありますその子要素によって。ただし、これらの子要素がフローティングされている場合、予期しない動作が発生し、親 div の高さがゼロになる可能性があります。
これを説明するには、次の CSS を考えてみましょう。
#wrapper { width: 75%; min-width: 800px; } .content { text-align: justify; float: right; width: 90%; } .lbar { text-align: justify; float: left; width: 10%; }
この CSS を使用して HTML を作成します。例:
<div>
ページは正しくレンダリングされますが、DOM を検査すると、 「#wrapper」div の高さは 0px のようです。これは、フローティングされたコンテンツ自体がドキュメントの通常のフローから削除され、基本的にドキュメント ツリーから削除されるためです。
この結果、親 div の高さはフローティングされた子の影響を受けなくなります。その結果、親 div はデフォルトの高さ 0px のままになります。
この問題を解決し、親 div がそのフロートされたコンテンツを含むように拡張されるようにするには、親の「overflow: hidden」プロパティを使用できます。部これにより、新しい「ブロック フォーマット コンテキスト」が作成され、フローティングされた子が親の境界内に留まるようになります。
更新された CSS は次のとおりです。
#wrapper { width: 75%; min-width: 800px; overflow: hidden; /* Added */ }
この変更により、「#wrapper " div はフローティングされた子に合わせて拡大され、ページのレイアウトが期待どおりに動作できるようになります。
以上がフローティングされた子を持つ親 Div の高さがゼロになるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。