子コンテナをフロートすると親コンテナの高さが 0 になるのはなぜですか?

フローティング コンテンツとコンテナの高さの混乱

CSS では、フローティング要素は通常のドキュメント フローの外側に配置され、その高さには影響しません。親コンテナ。この動作は、特にページが正しく表示される場合に直感に反するように見えることがあります。

問題を理解する

次の CSS を検討してください。

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

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

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

次のような HTML 構造が作成されます:

<div>

ページは正しくレンダリングされますが、検査すると、親 div#wrapper の高さが 0px と表示されます。これは、.content や .lbar などのフローティング コンテンツが通常のフローから削除され、ブロック コンテンツの外側の位置を占めるために発生します。

高さの問題の解決

親コンテナがフロートされたコンテンツの高さに確実に拡張されるようにするには、次の 2 つの主な手法があります。

• Overflow: Hidden: コンテナ要素に overflow: hidden を設定すると、新しいコンテナ要素が確立されます。ブロック フォーマット コンテキスト。これにより、コンテナはフローティングされた子の高さを考慮するように強制されます。
• フロートを含む: インライン ブロック、疑似要素の使用など、フロートを含む他のメソッドも存在します。

正確なサイズ設定とフローを備えた Web ページを作成するには、CSS レイアウトのこの側面を理解することが重要です。

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