CSSクリア float_html/css_WEB-ITnose

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

IE 以外のブラウザー (Firefox など) で、コンテナーの高さが自動で、コンテナーのコンテンツにフローティング (フロートは左または右) 要素がある場合、この場合、コンテナーの高さはコンテンツの高さに合わせて自動的に拡張することができないため、コンテンツがコンテナの外にオーバーフローし、レイアウトに影響を及ぼします (または破壊することもあります)。この現象を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: Clear 属性を持つ空の要素を使用する

または

---

を使用することもできます。

.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 を設定します。

オーバーフロー属性を追加した後、フローティング要素はコンテナー層に戻り、コンテナーの高さが上がり、フローティング要素をクリーンアップする効果が得られます。

.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 属性を追加して内部フロートをクリアしますが、これにより全体的にフローティングになり、レイアウトに影響を与えるため、そうではありません推奨。

方法 4: CSS :after 擬似要素を使用する

:after 擬似要素 (これは擬似クラスではなく、要素の後に最も近い要素を表す擬似要素であることに注意してください) と IEhack を組み合わせます、現在の主流と完全に互換性があります。主要なブラウザの場合、ここでの IEhack は hasLayout をトリガーすることを指します。

float 要素のコンテナに clearfix クラスを追加し、このクラスに :after 疑似要素を追加して、要素の末尾に非表示のブロック要素 (Block 要素) を追加して、float をクリーンアップします。

.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>

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

概要

上記の例を通じて、float をクリアする方法が 2 つのカテゴリに分類できることが簡単にわかります:

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

2 つ目は、フローティング要素の親要素の BFC (ブロック フォーマット コンテキスト、ブロック レベルのフォーマット コンテキスト) をトリガーして、親要素にフローティング要素を含めることができるようにすることです。

推奨

Web ページのメイン レイアウトで :after 疑似要素メソッドを使用し、フロートをクリーンアップする主な方法として使用します。隠れたオーバーフロー要素の問題に注意してください); if 要素自体がフローティング要素である場合、テキスト内では、隣接する要素を使用して前のフローティング要素をクリアできます。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。