ホームページ >ウェブフロントエンド >CSSチュートリアル >フロート要素によって親コンテナの背景が完全に表示されなくなるのはなぜですか?これを修正するにはどうすればよいですか?
フロート要素によって親コンテナの背景が完全に表示されなくなるのはなぜですか?これを修正するにはどうすればよいですか?
- Susan Sarandonオリジナル
- 2024-11-29 07:27:101007ブラウズ
要素のフロートが背景色の適用範囲に影響を与える
HTML では、フローティング要素が親コンテナの背景色の適用範囲を混乱させる可能性があります。コンテナ要素に float プロパティを持つ子要素がある場合、その子要素は通常のドキュメント フローから削除されます。これにより、親要素が折りたたまれて背景色が見えにくくなる可能性があります。
シナリオでこの問題に対処するには提供:
<br><div><pre class="brush:php;toolbar:false"><div>
次の CSS を使用します:
.content {
width: 960px; height: auto; margin: 0 auto; background: red; clear: both;
}
.left {
float: left; height: 300px; background: green;
}
.right {
float: right; background: yellow;
}
望ましい結果赤い背景色が「.content」div の高さ全体を覆うようにすることです。ただし、「.right」 div にコンテンツが設定されると、親コンテナの高さを拡張できず、赤い背景が不完全になります。
解決策は、「overflow: hidden」プロパティを適用することです。 「.content」要素:
<br>.content {</p>
<pre class="brush:php;toolbar:false">overflow: hidden;
}
「overflow: hidden」を設定すると、「.content」 div にはフローティングされた子要素が強制的に含まれるようになり、それが防止されます。崩壊から。その結果、意図したとおり、赤い背景が ".content" div の高さ全体を覆うようになりました。
以上がフロート要素によって親コンテナの背景が完全に表示されなくなるのはなぜですか?これを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。