フローティングの子を含むコンテナの高さがゼロになるのはなぜですか?

フローティングされた子を持つコンテナの高さについて理解する

CSS を使用する場合、フローティングされた子を持つ親コンテナが最終的に次のような状況になる場合があります。高さゼロ。子がコンテナ内のスペースを占有していることを考えると、この動作は混乱を招く可能性があります。

問題

次の 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>

ページは次のようになります。正しくレンダリングします。ただし、要素を調べると、div#wrapper が高さ 0 ピクセルとして表示されていることがわかります。

なぜそれが起こるのか

フローティングされたコンテンツは、コンテナの高さに影響します。この場合、.content 要素と .lbar 要素は両方ともフローティングであるため、ドキュメントの通常のフローから削除されます。その結果、コンテナにはフローティングでないコンテンツは含まれません。これにより、コンテナが空であるかのように、コンテナの高さをゼロに折りたたむことができます。

解決策

この問題に対処するには、次の方法を使用できます。

• overflow: hidden: コンテナーにこのプロパティを設定すると、コンテンツのオーバーフローが防止されますその範囲の外にあります。これにより、新しいブロックの書式設定コンテキストが確立され、フローティングされた子を収容するためにコンテナが強制的に展開されます。
• フロートを含む: フロートを含むその他のテクニックには、clear プロパティの使用や空の div の追加などがあります。クリア付き: 両方;

CSS でレイアウトを作成するには、float のこの動作を理解することが不可欠です。適切な手法を採用することで、コンテナが適切な高さになり、ページ要素が正しく配置されるようにすることができます。

以上がフローティングの子を含むコンテナの高さがゼロになるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。