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

高さゼロの親の謎: 浮遊する子とコンテナの高さ

Web デザインの領域で、CSS での奇妙な動作に遭遇スタイリングは複雑になる可能性があります。このような謎の 1 つは、浮動小数点数の子要素が含まれているにもかかわらず、親 div の高さが不思議なことに 0 まで縮小するときに発生します。この謎を解明するために、CSS と HTML コードを詳しく調べてみましょう。

#wrapper {
  width: 75%;
  min-width: 800px;
}

.content {
  text-align: justify;
  float: right;
  width: 90%;
}

.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

<div>
<p>これらのスタイルを適用すると、ページは正しく表示されます。しかし、要素を検査すると、奇妙な観察結果が得られます。親 div、#wrapper は、浮動子 div が存在するにもかかわらず、高さが 0px を示します。この動作により、親 div の高さがなぜ消えるのかという疑問が生じます。</p>
<p>その答えは、CSS の浮動要素の固有の性質にあります。フローティング コンテンツは基本的に通常のドキュメント フローから削除され、通常のレイアウトの外側の場所を占めます。その結果、コンテナの高さは浮いていない内容物によってのみ決まります。この場合、#wrapper 内のすべてのコンテンツがフロート状態であるため、コンテナーの高さはゼロに折りたたまれます。</p>
<p>この動作を修正するには、いくつかの手法を使用できます。</p>
<ul>
<li>
<strong>オーバーフロー: Hidden:</strong> 親 div で overflow: hidden を設定すると、新しいブロック書式設定コンテキストが作成されます。これにより、フローティングの子要素がコンテナの高さに影響を与えることが効果的に強制されます。</li>
<li>
<strong>フロートを含む:</strong> フロート要素を含めるためのさまざまなメソッドが存在し、親コンテナの高さが適切に拡張されるようにします。これには、疑似要素、CSS3 フレックスボックス、またはグリッド レイアウトの使用が含まれます。</li>
</ul>
<p>浮動要素の動作を理解し、適切な封じ込めテクニックを実装することで、開発者は混乱を招く親 div の高さがゼロになる現象を防ぎ、制御を維持できます。ページレイアウト上で。</p>
</div>

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