3

ここで、clearfix のかなり異なる方法を見ました: http://www.marcwatts.com.au/blog/best-clearfix-ever/

clearfix を自動化し、クリアしたい要素に「clearfix」または同様のクラスを追加する必要がない次の CSS コードを追加することを提案しています。

/* our Global CSS file */
article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }

/* our ie CSS file */
article { zoom:1; }
aside { zoom:1; }
div { zoom:1; }
footer { zoom:1; }
form { zoom:1; }
header { zoom:1; }
nav { zoom:1; }
section { zoom:1; }
ul { zoom:1; }

この方法に欠点はありますか? これにより、必ずしも clearfix を必要としない要素を clearfix することになるのでしょうか? それとも、これがあらゆる状況を説明するような規則ですか?

4

5 に答える 5

24

それは悪い考えだと思います。これをするのを忘れているように見える誰かを本当に信頼するつもりですか：

article, aside, div, footer, form, header, nav, section, ul { zoom:1; }

フロートをクリアすることは、複雑なことではありません。

「すべての」要素に大打撃を与えるのではなく、ケースバイケースで処理する必要があります。

そんなことをしたらまた何か噛み付いてくるよ、きっと。

一つには、@Guffaの答えに同意します。

それに対するエッジ ケースの理由は IE7 に関するものです: http://www.satzansatz.de/cssd/onhavinglayout.html

zoom: 1hasLayout要素として知られるものを提供するための一般的な方法です。要素に適用するhasLayoutと、特定の種類のレンダリングの問題が修正されますが、他の問題が発生する可能性もあります。リンクされたドキュメントからの引用：

すべてにレイアウトを与えないでください。その濃度の毒、レイアウトを持つことは治療法ではなく、レンダリングを根本的に変えます。

個人的には、overflow: hiddenメソッドを使用してフロートを含めるのが好きです。それがうまくいかないときは、clearfix を使用します。

http://html5boilerplate.com/の clearfix のバージョンを使用する必要があります。

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}
于 2011-06-07T23:59:54.990 に答える
4

これにより、必ずしも clearfix を必要としない要素を clearfix することになるのでしょうか?

はい。すべてのdiv要素をクリアしたくありません。

于 2011-06-07T23:42:33.893 に答える
2 
Are there any disadvantages to this method?

'after' 要素は十分にサポートされていないため、< IE8 では十分ではないことが 1 つ考えられます。詳細については、CSS トリックを参照してください。

于 2011-06-07T23:54:11.377 に答える
0

過去数年間、プロジェクトですべての div をグローバルにクリアしてきましたが、うまく機能しています。私が div を使用するケースの約 95% で、clearfixグローバルなサイトに適用すると魅力的に機能しました。潜在的な問題が発生するケースは確かにあり、clearfix問題のある div を元に戻すことになります。私が使用する CSS 宣言は次のとおりです。

div:after {
    clear: both;
    margin: 0;
    padding: 0;
    display: table;
    font-size: 0;
    line-height: 0;
    content: ' ';
    visibility: hidden;
    overflow: hidden;
    }
div {
    *zoom: 1;
    }
于 2016-12-13T03:05:20.853 に答える