CSS で浮動要素を使用すると、親コンテナの背景色が表示されないのはなぜですか?

CSS の背景色と浮動要素

CSS を使用する場合、浮動要素によって親コンテナが表示されなくなる状況が発生することがあります。その背景色。この問題は、フローティング要素がドキュメントのフローから削除され、親の定義されたサイズが失われるために発生します。

例として、次の HTML 構造を考えてみましょう。

<div class="content">
    <div class="left">
        <p>some content</p>
    </div>
    <div class="right">
        <p>some content</p>
    </div>
</div>

次の場合スタイリング:

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
 }

.left {
     float: left;
     height: 300px;
     background: green;
 }

.right {
     float: right;
     background: yellow;
 }

このシナリオでは、「右側」のフローティング要素にコンテンツを追加しても、親 div が垂直方向に拡張されず、赤色の部分が表示されます。この問題を解決するには、親要素の overflow プロパティを使用します。オーバーフローを非表示または自動に設定すると、親にその子が強制的に含まれ、背景色が正しく表示されるようになります。

オーバーフローを使用する例を次に示します。hidden:

親要素にその子を含めると、フローティング要素が存在する場合でも、赤い背景が表示されるようになります。

.content {
    overflow:hidden;
}

以上がCSS で浮動要素を使用すると、親コンテナの背景色が表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。