1

より簡単な使用方法はあります.clearfixか?

年：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

私の新しい明確な修正：

.coreys-clearfix:after {
    content: "";
    display: block;
    clear: both;
}

これをバリデーターに通しましたが、エラーはありませんでした。これが使用できない理由を知っている、または見ている人はいますか? 3行のコードと を保存するだけです.が、それでも.

4

3 に答える 3

3

私はそうは思いません。

ドットの理由は、.clearfix:after従来のブラウザーで機能させるためです。

ニコラス・ギャラガーはその理由を次のように説明しています。

Firefox < 3.5 では、挿入された文字を非表示にするための visibility:hidden を追加した Thierry の方法を使用すると効果的です。これは、従来のバージョンの Firefox が content:"." を必要とするためです。特定の状況で、本体とその最初の子要素の間に余分なスペースが表示されるのを避けるため (例: jsfiddle.net/necolas/K538S/.)

が空でないのはこのためcontentです。残りの 3 行 ( visibility、line-heightおよびheight) は、clearfix が実際にレイアウト内のスペースを占有しないようにするためのものです。

実際、Nicholas は新しい clearfix を作成しました。これは、より少ないバイト数で同じ作業を行います。ここでそれを読んでください：http://nicolasgallagher.com/micro-clearfix-hack/

しかし、良い努力。:)

于 2012-09-12T16:28:26.180 に答える
0

ドットは古いブラウザのサポートのためにあります。それが必要ない場合は、「新しい」ものを使用できます。

この答えは実際にそれをかなりうまく説明しています。

于 2012-09-12T16:36:12.060 に答える