CSSクリア float_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSSクリア float_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:12:19

オリジナル

964 人が閲覧しました

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 疑似要素メソッドを使用してフロートをクリーンアップし、ドキュメントの構造をより明確にすることができます。