CSS フロートによって引き起こされるコンテンツ オーバーフローの問題と、それらをクリアする方法をまとめます。

CSS のフロート効果は非常に不安定な場合があります。制御がうまくいかない場合は、通常はフロートをクリアする方が良いです。ここでは、CSS のフロートによって引き起こされるコンテンツのオーバーフローの問題とフロートをクリアする方法についてまとめます。

質問を投げる ブリック (表示: ブロック) まずは現象を見てください:
IE 以外のブラウザ (Firefox など) で、コンテナの高さが自動で、フローティング (フロートが左または右) がある場合コンテナーのコンテンツ内の要素 (この場合) この場合、コンテナーの高さをコンテンツの高さに合わせて自動的に拡張することができないため、コンテンツがコンテナーの外にオーバーフローし、レイアウトに影響を及ぼします (または破壊することもあります)。この現象をfloatオーバーフローといい、これを防ぐために行われるCSSの処理をCSSクリアフロートといいます。 W3C の例を引用すると、ニュース コンテナーはフローティング要素を囲みません。

.news {   
  background-color: gray;   
  border: solid 1px black;   
  }   

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }

<p class="news">
<img  src="news-pic.jpg" / alt="CSS フロートによって引き起こされるコンテンツ オーバーフローの問題と、それらをクリアする方法をまとめます。" >
<p>some text</p>
</p>

フロートをクリアする:

1、フローティング要素の後ろに
タグを追加します。

　<br/>标签有自带的清除浮动属性；

をフローティング要素の後ろに追加します。要素レイヤー;

　<p>

　　　　<p style="float:left"></p>

　　　　<p style="float:left"></p>

　　　　<p style="clear:both"></p>

　　</p>

3、フローティング要素に overflow:auto スタイルを追加します。

4、最後のフローティング要素に次のスタイルを設定します:

/* 清理浮动 */
.clearfix:after {   
 visibility:hidden;   
 display:block;   
 font-size:0;   
 content:" ";   
 clear:both;   
 height:0;   
}   
.clearfix {   
 zoom:1;   
}

Advanced" ブラウザ:after 疑似クラスを使用して、フローティング ブロックの後に display:none 以外の非表示ブロック コンテンツを追加し、これに clear:both を設定してフローティング ブロックをクリーンアップします。 IE6 および 7 のフローティング ブロックに haslayout を追加して、フローティング ブロックを浮き上がらせ、ドキュメント フローに正常に影響を与えます。

5、別の簡単な方法:

.cf:before, .cf:after {   
    content:"";   
    display:table;   
}   
.cf:after {   
    clear:both;   
}   
.cf {   
    zoom:1;   
}

原則は同じです。 :after 疑似クラスを使用して、float の後に clear:both を提供します。違いは、display: table を使用してこの空白スペースを非表示にすることです。代わりに、visibility:hidden;height:0;font-size:0; を設定します。

ここでの :before 疑似クラスに注目してください。実際には、これは折りながら上マージンを処理するために使用され、フロートのクリーンアップとは何の関係もありません。ただし、フローティングはブロックの書式設定コンテキストを作成するため、フローティング要素上の別の要素にマージンボトムがあり、このフローティング要素にたまたまマージントップがある場合は、それらを折りたたむべきではありません (これは一般的ではありませんが)。

以上がCSS フロートによって引き起こされるコンテンツ オーバーフローの問題と、それらをクリアする方法をまとめます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。