CSSクリア float_html/css_WEB-ITnose

CSSクリアフロートとは何ですか?

IE 以外のブラウザ (Firefox など) で、コンテナの高さが auto で、コンテナのコンテンツにフローティング (フロートは左または右) 要素がある場合、このこの場合、コンテナーの高さをコンテンツの高さに合わせて自動的に拡張することができないため、コンテンツがコンテナーの外にオーバーフローし、レイアウトに影響を及ぼします (または破壊することもあります)。この現象をfloatオーバーフローといい、これを防ぐために行われるCSS処理をCSSクリアフロートといいます。

W3C の例を引用すると、ニュース コンテナーはフローティング要素を囲みません。

.news {  background-color: gray;  border: solid 1px black;  }.news img {  float: left;  }.news p {  float: right;  }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>

;

フローティングメソッドをクリア

方法 1: クリア属性を持つ空の要素を使用する

フローティング要素の後に空の要素を使用します。 266b42fc2b469bb88063b7b7f9d1b47116b28748ea4df4d9c2150843fecfba68 のようにし、CSS で .clear{clear:both;} 属性を割り当ててフロートをクリアします。クリーニングには 9bd35d0ab1399652577f51221b5af246 または 9e9608c45e9340a126bcb009bcb97e71 を使用することもできます。

.news {  background-color: gray;  border: solid 1px black;  }.news img {  float: left;  }.news p {  float: right;  }.clear {  clear: both;  }<div class="news"><img src="news-pic.jpg" /><p>some text</p><div class="clear"></div></div>

利点: シンプル、コードが少ない、ブラウザーとの互換性が高い。

短所: 大量の非セマンティックな HTML 要素を追加する必要があり、コードは十分にエレガントではなく、後で保守するのは簡単ではありません。

方法 2: CSS の overflow 属性を使用する

さらに、float 要素のコンテナに overflow:hidden; または overflow:auto; を追加します。親要素のコンテナの幅と高さを設定するか、zoom:1 を設定するなど、IE6 でトリガーする必要があります。オーバーフロー属性を追加した後、フローティング要素はコンテナー層に戻り、コンテナーの高さが上がり、フローティング要素をクリーンアップする効果が得られます。

.news {  background-color: gray;  border: solid 1px black;  overflow: hidden;  *zoom: 1;  }.news img {  float: left;  }.news p {  float: right;  }<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>

方法 3: 浮動要素のコンテナに float を追加します。

内部の float をクリアするには、float 属性を浮動要素のコンテナに追加します。全体としてフロートになります。レイアウトに影響するため、お勧めできません。

方法 4: 隣接要素処理を使用する

何もせず、フローティング要素の後ろの要素に Clear 属性を追加します。

.news {  background-color: gray;  border: solid 1px black;  }.news img {  float: left;  }.news p {  float: right;  }.content{  clear:both;  }<div class="news"><img src="news-pic.jpg" /><p>some text</p><div class="content">***</div></div>

ここの div.content にはコンテンツがあることに注意してください。

方法 5: CSS :after 疑似要素

を :after 疑似要素と組み合わせて使用​​します (これは疑似クラスではなく、最も近い要素を表す疑似要素であることに注意してください)ここでの IEhack は、hasLayout をトリガーすることを指します。 Clearfix クラスをフローティング要素のコンテナに追加し、次にこのクラスに :after 疑似要素を追加して、要素の最後に非表示のブロック要素 (Block 要素) を追加してフロートをクリーンアップします。

.news {  background-color: gray;  border: solid 1px black;  }.news img {  float: left;  }.news p {  float: right;  }.clearfix:after{  content: "020";   display: block;   height: 0;   clear: both;   visibility: hidden;    }.clearfix {  /* 触发 hasLayout */   zoom: 1;   }<div class="news clearfix"><img src="news-pic.jpg" /><p>some text</p></div>

コンテナの内部要素の末尾に非表示のスペース「020」またはドット「.」をCSS擬似要素で追加し、floatをクリアするclear属性を付与します。 IE6 および IE7 ブラウザの場合、haslayout をトリガーするには、zoom:1 を clearfix クラスに追加する必要があることに注意してください。

概要

上記の例を通して、フロートをクリアする方法が 2 つのカテゴリに分類できることが簡単にわかります。

1 つは、clear 属性を使用する方法です。要素を閉じるには、clear:both 属性を持つ空の div を追加します。実際、:after 疑似要素を使用する方法は、ドットの内容と clear:both 属性を持つ要素を追加することによっても実現されます。要素の最後にあります。

2 つ目は、浮動要素の親要素の BFC (Block Formatting Contexts、ブロックレベルの書式設定コンテキスト) をトリガーして、親要素に浮動要素を含めることができるようにすることです。

Web ページのメイン レイアウトで :after 疑似要素メソッドを使用し、フロートをクリーンアップする主な方法として使用します。ul などの小さなモジュールで overflow:hidden; を使用します。非表示のオーバーフロー要素の問題); フローティングの場合、要素は特別な処理を行わずに内部フロートを自動的にクリアできます。ボディ内の隣接する要素を使用して以前のフロートをクリアします。

最後に、比較的完璧な :after 疑似要素メソッドを使用してフロートをクリーンアップし、ドキュメントの構造をより明確にすることができます。