clearfixを検証する

乱雑モックアップさんのブログで興味深い記事があったので検証してみました。

どうやらFirefoxだけに発生するclearfix関連のバグみたい。
調べてみたところclearfixの「:after」の指定に問題が潜んでいるようで、Firefox 4.0でも同様の現象を再現できました。

※記事内で使われているclearfixは、いまどき ? いまさら ? clear fix のコード | ヨモツネットと同じものみたいなので、コードの解説はヨモツネットさんの記事を参照してみてください。コメント欄でも色々と言及されていて勉強になります。

clearfixいろいろ

clearfixの始まり

意外とみんな知らないclearfixの始まりについて調べてみた | REFLECTDESIGNによれば、clearfixを最初に考案したのは、オーストラリア人のWebデベロッパー、Tony Aslettさんとのこと。
REFLECTDESIGNさんの記事でも紹介されていますが、念のため元ネタのサイトへのリンクです。

CSSは以下のとおり。
※class名を「.Clearfix」に変更し、コードの体裁を整えています。以下、同様です。

.Clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.Clearfix {
  display: inline-block;
}

/* Hides from IE Mac */
* html .Clearfix {
  height: 1%;
}

.Clearfix {
  display: block;
}
/* End Hack */

jQuery

jQueryではfont-size: 0;が削除されています。

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

.Clearfix {
  display: inline-block;
}

/* hides clearfix from IE-mac \*/
* html .Clearfix {
  height: 1%;
}

.Clearfix {
  display: block;
}
/* end hide from IE-mac */

MooTools

MooToolsではMac IEを除外したものが使われてますね。

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

.Clearfix {
  display: inline-block;
}

* html .Clearfix {
  height: 1%;
}

.Clearfix {
  display: block;
}

そういえばline-height: 0;ってのもclearfixをモダンブラウザに対応させました | STOPN’ LISTENで言及されてるなぁ。

line-height:0;

この指定がないとSafariなど一部のブラウザで要素の下に隙間ができてしまうケースがあるので、
必要な指定なんです。

ヨモツネット型clearfix

「ヨモツネット型」というのも語弊があるかもですが、乱雑モックアップさんのサンプルCSSでも使用されているものです。

.Clearfix {
  /zoom : 1;
}

.Clearfix:after {
  content : "";
  display : block;
  clear : both;
  height: 0;
}

height: 0;は、ヨモツネットさんによれば、

"." が擬似的に追加されることにより、高さを 0 にしたり、表示を消したりとコードが長くなっていましたが、Netscace に対応しないのならこれらをバッサリなくすことができます。

とのことなので、height: 0;はいらなさそうですが、これがないと一部のブラウザーで隙間が空いたりするみたいです。
私もWebアプリのコーディングをしていた時にOperaで下に隙間が空いたことがありました。詳しい条件は覚えていません…(確かOpera 10で、マイナーバージョンは忘れました)

その他のclearfix

YUIBlogで紹介されていたclearfix

.Clearfix:before,
.Clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  zoom: 1;
}

content: ".";height: 0;overflow: hidden;の組み合わせ。

HTML5 Boilerplate(邦訳)のclearfix

.Clearfix:before,
.Clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  zoom: 1;
}

content: "\0020";height: 0;overflow: hidden;の組み合わせ。
"\0020"は半角スペース。

個人的な結論

自分なりに検証したんですが、content: "";height: 0;の組み合わせがポイントみたいです。
""の中は「ピリオド」、「半角スペース」、「空」の3パターン。

サンプルCSS その1

:after擬似要素にピリオドを使用した場合、height: 0;visibility: hidden;が必要。
YUIBlogで紹介されているものと似てますが、ちょっと違う。

.Clearfix:before,
.Clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  /zoom: 1;
}

サンプルCSS その2

:after擬似要素に半角スペースを使用した場合、height: 0;はいらない。overflow: hidden;で解決か?

.Clearfix:before,
.Clearfix:after {
  content: "\0020";
  display: block;
  overflow: hidden;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  /zoom: 1;
}

サンプルCSS その3

:after擬似要素が空("")の場合も「サンプルCSS その2」と同様にoverflow: hidden;で解決?

.Clearfix:before,
.Clearfix:after {
  content: "";
  display: block;
  overflow: hidden;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  /zoom: 1;
}

Nicolas Gallagher型clearfix

update
「サンプルCSS その3」と同じコードを紹介しているブログが話題になっていました。
その後、もっとシンプルなコードにアップデートされていたので、追記しておきます。

update
HTML5 Boilerplate 2.0に反映されています。

update
Opera 11.62へのバグ対応(height: 0;もしくはfont:0/0 a;が必要)。

update
修正プログラムがポストされているので、元記事のコメント欄をチェックすることを推奨します。

.Clearfix:before,
.Clearfix:after {
  content: " "; /* 半角スペース使用でOperaのバグを回避できる */
  display: table;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  *zoom: 1;
}

実際には「IE6/7で表示が違う場合がある」と言及されているようなので、関連リンクを貼っておきます。

まとめ

:after擬似要素にoverflow: hidden;を指定する方法で上手くいくんですが、

.Foo {
  overflow: hidden;
  /zoom: 1;
}

上記のようなfloat解除は印刷やレイアウト組む時にもいろいろと影響があるので、:after擬似要素へのoverflow: hidden;指定で影響ないかが少し気になるところです。
同様の問題などが発生するかは、今後検証していきたいと思います(遠い目)。

他にもいろんな条件が重なって「バグに遭遇」なんてこともありそうです。
そういう意味でもバグを情報共有された乱雑モックアップさんやその他の有益な記事はとても助かりますね。

その他、参考にさせていただいたサイト
スタイルシートをめぐる冒険: clearfixの決定版を作る -モダンブラウザ編-
clearfixはちゃんと考えられていた

ちなみにnorisfactoryさんの透過gifを使った方法(CASE 11)でも今回検証したFirefoxのバグが見られました。透過gifの方法だと他にもclearできないなどの経験があったけど、忘れた。

1件のコメント

皆様ご存知のclearfixについて - log.SpecterAnt |

[…] 詳しくは、下記の参考にさせていただいたサイトを見ていただけたらと…はい。 参考にさせていただいたサイト ・いまどき ? いまさら ? clear fix のコード | ヨモツネット ・clearfixを検証する – Kamurogi Blog […]

コメントを投稿