フローティングされた子を持つ親 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 サイトの他の関連記事を参照してください。