フロート要素によって親コンテナの背景が完全に表示されなくなるのはなぜですか?これを修正するにはどうすればよいですか?

要素のフロートが背景色の適用範囲に影響を与える

HTML では、フローティング要素が親コンテナの背景色の適用範囲を混乱させる可能性があります。コンテナ要素に float プロパティを持つ子要素がある場合、その子要素は通常のドキュメント フローから削除されます。これにより、親要素が折りたたまれて背景色が見えにくくなる可能性があります。

シナリオでこの問題に対処するには提供:

<br><div>
<pre class="brush:php;toolbar:false"><div><p></p></div><br>

次の 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 {<pre class="brush:php;toolbar:false">overflow: hidden;

}

「overflow: hidden」を設定すると、「.content」 div にはフローティングされた子要素が強制的に含まれるようになり、それが防止されます。崩壊から。その結果、意図したとおり、赤い背景が ".content" div の高さ全体を覆うようになりました。