ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS で浮動要素を使用すると、親コンテナの背景色が表示されないのはなぜですか?

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

Barbara Streisand
リリース: 2024-12-03 00:11:11
オリジナル
191 人が閲覧しました

Why Doesn't My Parent Container Show Its Background Color When Using Floating Elements in 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート