div css の入門チュートリアル、より簡潔な CSS フローティング メソッド:clearfix_html/css_WEB-ITnose

-

float をクリアするには、br タグに付属の clear 属性を使用する、要素のオーバーフローを使用する、空のタグを使用して clear:both を設定するなど、さまざまな方法があります。ただし、互換性の問題とセマンティックの問題を考慮して、通常は次のコードを使用して float をクリーンアップします。

/* フロートをクリアします*/ .clearfix:after { 表示: ブロック; コンテンツ:" "; クリア: 両方; }原理は、「上級」ブラウザで :after 疑似クラスを使用して、フローティング ブロックの後に display:none ではない非表示のブロック コンテンツを追加し、これに clear:both を設定してフローティング ブロックをクリーンアップすることです。 IE6 および 7 のフローティング ブロックに haslayout を追加して、フローティング ブロックを高くし、ドキュメント フローに正常に影響を与えます。

上記のコードは、float をクリーンアップする現在の主流の方法であるはずです。 Alipay は現在この方法を使用しています。

さて、Nicolas Gallagher はより簡潔な解決策を示しました:

.cf:before, .cf:after { } .cf {zoom:1; }

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

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