フローティング要素を使用するときに CSS の背景によってコンテンツが隠されないようにするにはどうすればよいですか?

浮動要素を含む CSS 背景色

次の HTML コードを考えてみましょう:

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

<div class="content">
  <div class="left">
     <p>some content</p>
  </div>
  <div class="right">
     <p>some content</p>
  </div>
</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;
 }

コンテンツを .right に追加すると、親の .content div が拡張されて対応できないその子の高さにより、拡張された領域を覆う目に見えない赤い背景が生じます。

問題の理解

この場合の .left や .right などの浮動要素は、通常の要素から削除されます。書類の流れ。子要素が物理的なスペースを占有していないため、親要素の高さは定義されていないため、これは親要素に影響します。その結果、親要素はそれ自体で折りたたまれます。

解決策: ボックスの寸法を維持する

この問題を修正するには、フローティング子要素にもかかわらず親要素の寸法を強制的に維持する必要があります。これは、overflow: hidden を .content に追加することで実現できます。

.content {
    overflow: hidden;
}

あるいは、overflow: auto を使用すると、高さの不一致を識別しながら同様の機能を提供できます。

これ変更により、.content がフローティングの子をカプセル化するようになり、赤色で切り詰められる問題が解決されます。背景.

代替: Clearfix

サポートが制限されているブラウザの場合、clearfix ハックを使用すると、この問題に対処できます。ただし、このアプローチは、最新のブラウザーとの互換性を考慮すると推奨されません。

以上がフローティング要素を使用するときに CSS の背景によってコンテンツが隠されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。