ホームページ > 記事 > ウェブフロントエンド > CSSでフロートをクリアするにはどうすればよいですか? CSSでfloatをクリアする5つの方法まとめ

CSSでフロートをクリアするにはどうすればよいですか? CSSでfloatをクリアする5つの方法まとめ

不言オリジナル: 2018-08-10 11:38:433245ブラウズ

この記事では、CSS でフロートをクリアする方法を紹介します。 CSS のフロートをクリアするための 5 つの方法をまとめたので、困っている方は参考にしていただければ幸いです。

方法 1 (clear 属性を持つ空のタグを使用する)

タグは div br hr にすることができます

5394d62b37c0d1016baca90bf99fbfbf などの浮動要素の後に空の要素を使用します。 0cba36f12cf561cef14ffa62bcdafa2c を選択し、CSS で .clear{clear:both;} 属性を割り当ててフロートをクリアします。クリーニングには 9bd35d0ab1399652577f51221b5af246 または 9e9608c45e9340a126bcb009bcb97e71 を使用することもできます。

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

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

フローティング要素の下に 5394d62b37c0d1016baca90bf99fbfbf94b3e26ee717c64999d7867364b1b4a3 .clear{ height:0px;font-size:0;clear:both;} を追加しますが、IE6 ではブロック要素に最小の高さ、つまり高さが 19 ピクセル未満の場合、デフォルトは 19 ピクセルです

解決策: font-size:0; または overflow:hidden; フローティング要素の下に 079d205125cc08b5a6372726f48e58b9 を追加します。

方法 2 (フローティング要素の親要素にオーバーフロー属性を追加する) は、空のタグ要素を通じてフロートをクリアするときに意図しないコードを追加しなければならないという欠点を解決します。

このメソッドを使用するには、フローティングを解除する必要がある要素に CSS 属性を定義するだけです。 IE6 との互換性があるため、高さ: 1% を使用することもできます。

注: ズームは W3C 標準に準拠していません。 overflow:hidden も実装できます。

<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

方法 3: (浮動要素のコンテナに float を追加します。つまり、親に float を追加して float をクリアします)

<div style="float: right;background-color: #1a1a1a;">
   <div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">
 
   </div>
   <div style="width: 500px;height: 200px;background-color: #8a6d3b">
 
   </div>
</div>

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

方法 4: (float をクリアするために疑似オブジェクトの後に使用します)

疑似要素の後に (これは疑似クラスではなく、要素の後に最も近い要素を表す疑似要素であることに注意してください)現在の主流と完全に互換性のある IEhack 主要なブラウザの場合、ここでの IEhack は hasLayout をトリガーすることを指します。
after 疑似要素を使用して、要素の末尾に非表示のブロック要素 (Block 要素) を追加し、フロートをクリーンアップします。

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

after疑似オブジェクトはIEブラウザではサポートされていないため、IE/WINブラウザには影響しません。具体的な書き方については以下の例を参照してください。ご使用の際は以下の点にご注意ください。

1. このメソッドでは、フローティング要素をクリアする必要がある疑似オブジェクトに height:0 を設定する必要があります。そうでない場合、要素は実際の要素よりも数ピクセル高くなります。ただし、content 属性は必須です。このメソッドを説明するとき、content 属性の値は「.」に設定されます。

<style type="text/css"> 
.listinfo:after{
      display:block;
      clear:both;
      content:"";  
      visibility:hidden;
      height:0;
} 
<ul class="listinfo">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

方法 5: 隣接要素処理を使用します

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

このメソッドは、フローティング要素のすぐ隣にある要素がここで使用されることを除いて、空のラベルの追加に似ています

使用法:

Web のメインレイアウト中に :after 疑似要素メソッドを使用しますページと浮動小数点をクリーンアップする主な方法として ul などの小さなモジュールで overflow:hidden; を使用します (浮動要素の場合は、隠れたオーバーフロー要素の問題に注意してください)。内部フロートは特別な処理を行わずに自動的にクリアできます。

テキスト内の隣接する要素を使用して前のフロートをクリーンアップします。

比較的完璧な :after 疑似要素メソッドを使用して浮動小数点をクリーンアップすると、ドキュメント構造がより明確になります。

バグ修正:

(1)、二重マージンのバグ IE6 を扱う場合、もう 1 つ覚えておくべきことがあります。 if float と同じ方向にマージンを設定すると、

二重マージンが発生します。

簡単な修正: float に display:inline; を設定しますが、心配する必要はありません。これはまだブロックレベルの要素です。
(2)、3 ピクセル間隔は、浮動要素の周囲に奇妙な力場があるかのように、浮動要素の隣のテキストが魔法のように 3 ピクセルずつ追い出されることを意味します。

簡単な修正: 影響を受けるテキストの幅または高さを設定します。

(3) IE7 の下マージンのバグは、浮動親要素に浮動子要素がある場合、これらの子要素の下マージンが親要素によって無視されることです。

簡単な修正: 代わりに親要素の下部パディングを使用します。

CSSでフロートをクリアするにはどうすればよいですか? CSSでfloatをクリアする5つの方法まとめ

関連記事