浮動子要素を使用するときに親 Div の背景が崩れるのを防ぐにはどうすればよいですか?

フローティング要素と CSS 背景色

Web 開発では、フローティング要素が関係するシナリオに遭遇すると、CSS を使用して要素をスタイル設定することが困難になることがあります。これは、要素が「float」プロパティを使用してドキュメントの通常のフローから削除されるときに発生する可能性があり、親要素の寸法と背景色に問題が発生します。

2 つの div が「left」である次の単純化されたシナリオを考えてみましょう。と 'right' は、親の 'content' 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 のコンテンツが展開されるときに、強制的に親の「コンテンツ」div をそれに応じて展開します。代わりに、親 div が折りたたまれます。その結果、赤い背景が隠れてしまいます。

この問題を修正するには、要素がフローティングされているときに発生する動作の変化に対処する必要があります。設計上、これらは通常のドキュメント フローから削除され、基本的に親の境界の外側に配置されます。その結果、親にはその寸法を決定する手段がなく、崩壊につながります。

解決策は、浮いている子を強制的に含めることによって親に指示することです。これは、「overflow」プロパティを親要素に追加することで実現できます。 「overflow」に許容される値には、「hidden」と「auto」が含まれます。

.content {
    overflow: hidden;  // or overflow: auto;
}

この例の「content」 div にいずれかの値を適用すると、折りたたみの問題が修正され、親が次に従って展開できるようになります。コンテンツのサイズが変更され、赤い背景全体が露出します。

.content {
    overflow: hidden;
    ...
}

これにより、親のサイズが、フローティング要素により、問題を効果的に解決します。

以上が浮動子要素を使用するときに親 Div の背景が崩れるのを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。