スタイルシートをめぐる冒険: clearfixの決定版を作る －モダンブラウザ編－
clearfixの決定版を作る －モダンブラウザ編－
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。
基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。
例えば、clearfixの提唱者ではないかと類推されるPosition Is Everything版clearfixはこう。
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
一方、Movable Typeのデフォルトスタイルシートでもclearfixは採用されており、該当箇所だけ取り出すとこのようになっている（赤字はPosition Is Everything版clearfixと異なる部分）。
.pkg:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .pkg { display: inline-block; } /* no ie mac \*/ * html .pkg { height: 1%; } .pkg { display: block; } /* */
もちろんclearfixはこの2種類だけではない。いったいどのclearfixがベストなのか。まずは対象ブラウザをいわゆるモダンブラウザ（Firefox、Opera、Safari）に絞り込んで、clearfixの決定版を探っていきたいと思う。
検証のため共通で用意したスタイルシートとHTMLは以下の通り。
【スタイルシート】 body { margin: 0; padding: 0; width: 208px; } #wrapper { border: 1px solid #000000; padding: 3px; background: #cccccc; } #box-A { width: 100px; height: 1000px; background: #000000; float: left; } #box-B { width: 100px; height: 50px; background: #666666; float: right; }
【HTML】
clearfixについては、:after擬似要素を用いた部分がモダンブラウザ用の記述なので、そのバリエーションを以下の10種類、用意した。
CASE 1 .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; }
CASE 1は、Position Is Everything版clearfix と同じ記述。:after擬似要素にcontentを指定して、ボックス内要素の末尾にピリオドを追加、さらにそれを高さ0、不可視のブロック要素とし、clearを適用させる。最も一般的なスタイルだけに特に問題はないように思えるが、clearfixを適用させたボックスの高さをブラウザいっぱいにした時、ボトムにマージンが生じてしまうという不具合がある（ボックスを縦に積み重ねた場合は、マージンは生じない）。
以下、このCASE 1の記述をベースに、Movable Type版clearfixの設定を取り入れていく形でバリエーションを展開させていく。
CASE 2 .clearfix:after { content: "."; font-size: 0; display: block; height: 0; visibility: hidden; clear: both; }
CASE 2は、font-sizeの指定を追加した場合。ただし、Movable Type版clearfixとは変えて、0.1emでなく0とした。
CASE 3 .clearfix:after { content: "."; font-size: 0.1em; display: block; height: 0; visibility: hidden; clear: both; }
CASE 3では、Movable Type版clearfixにならい、font-sizeを0.1emとした。
CASE 4 .clearfix:after { content: "."; line-height: 0; display: block; height: 0; visibility: hidden; clear: both; }
CASE 4は、font-sizeではなく、line-heightの指定を追加した場合。
CASE 5 .clearfix:after { content: "."; font-size: 0; line-height: 0; display: block; height: 0; visibility: hidden; clear: both; }
CASE 5は、font-sizeとline-heightの指定を併記。ただし、font-sizeは0とした。
CASE 6 .clearfix:after { content: "."; font-size: 0.1em; line-height: 0; display: block; height: 0; visibility: hidden; clear: both; }
CASE 6は、Movable Type版clearfixと同様のfont-size、line-height指定を併記した場合。
CASE 7 .clearfix:after { content: "."; font-size: 0.1em; line-height: 0; display: block; height: 0.1px; visibility: hidden; clear: both; }
CASE 7では、さらにMovable Type版clearfixに近づけ、heightを0.1pxとした。
CASE 8 .clearfix:after { content: " "; display: block; height: 0; visibility: hidden; clear: both; }
CASE 8は、再び記述をCASE 1に戻した上で、追加する要素をMovable Type版clearfixにならいピリオドでなくスペースとした。
CASE 9 .clearfix:after { content: ""; display: block; height: 0; visibility: hidden; clear: both; }
CASE 9は、スペースでなく、alt="" のように空にしてみた場合。
CASE 10 .clearfix:after { content: ""; display: block; clear: both; }
最後に、CASE 10では、空なら最初から高さもないし、不可視にする必要もないから、height、visibilityの指定を削除してみた。
以上、10通りのclearfixを、Firefox（バージョン2.0）、Opera（バージョン9.2）、Safari（バージョン1.0）、3種類のブラウザで検証した結果が以下の表である。○はマージンの発生なし、×はマージンの発生あり、△もマージンが発生するが×よりは小さい。さらに、△の数字は大きいほど生じるマージンは小さい、つまり○に近いということである。
Safari Firefox Opera
CASE 1 基本形 × × ×
CASE 2 基本形＋font-size:0 × ○ △
CASE 3 基本形＋font-size:0.1em △1 ○ △
CASE 4 基本形＋line-height:0 △2 △ ○
CASE 5 基本形＋font-size:0; line-height:0 △2 ○ ○
CASE 6 基本形＋font-size:0.1em; line-height:0 △3 ○ ○
CASE 7 CASE 6 のheightを0.1pxに変更 △3 ○ ○
CASE 8 基本形のピリオドをスペースに変更 ○ ○ ○
CASE 9 基本形のピリオドを空に変更 ○ ○ ○
CASE 10 CASE 9 からheight、visibilityを削除 ○ ○ ○
Safariはバージョンが少々古いので、最新版では違う結果となるかもしれないが、ここから判断する限り、3ブラウザとも表示に不具合がないのは、CASE 8、CASE 9、CASE 10の3つ。中でも、記述のシンプルさ、論理性から、CASE 10がモダンブラウザ向けclearfixの決定版といえるのではないか。しかし、最初にclearfixを考えた人はなぜcontentをスペースや空でなくピリオドにしたんだろう。
【追記】
「clearfixを考えた人はなぜcontentをスペースや空でなくピリオドにしたんだろう」という問いについては、3ping.orgさんがおおよその解答を示してくれたが（トラックバック参照）、その後やっと問題のブラウザを特定できた。contentがスペースや空だとfloatをクリアできないのは、Netscapeだった。7.1で確認しているので、それより古いバージョンでも同様だろう。ただし、ここで検証したような親ボックスにborderまたはpaddingを設定したケースでは、floatがクリアされてしまうため見逃してしまったのだ（検証ページはこちら）。とはいえ、ピリオドにして、visibilityやらfont-sizeやらline-heightやら長々と記述するのは避けたい。そこで、少々反則かもしれないが、ピリオドの代わりに1×1ピクセルの透明GIFを用いたやり方を決定版としたいと思う。
CASE 11 .clearfix:after { content: url(pixel.gif); display: block; clear: both; height: 0; }
Safari Firefox Opera
CASE 11 CASE 10のcontentを透明GIFに、height: 0 追加 ○ ○ ○
(last modified: 09/12/2008)
TrackBack
このエントリーのトラックバックURL:
http://norisfactory.com/mt/mt-tb.cgi/38
» clearfixはちゃんと考えられてた from "3ping.org"
clearfixの記述は良く考えられていました。 [read more]
(tracked on 05/26/2007)
» 俗に言う clearfix と言われるコードのバリエーション色々 from "Lucky bag::blog"
構造に手を加えずに float を clear させるためのいわゆる clearfix には結構色々とバリエーションがあったりするんで、自分が知っているパ... [read more]
(tracked on 05/27/2007)
» links for 2007-05-30 from "Web*Lav"
20 WordPress Themes That Don't Disa... [read more]
(tracked on 05/30/2007)
» clearfixを考えみた .1 from "Unit3S.JP"
作成時によく使っている魔法の呪文の様に思われているclearfixを考えてみた。 clearfixは言わずも知れたPosition Is Everythi... [read more]
(tracked on 06/09/2007)
» clearfix をダイエットさせたいのですが from "Hato-Style"
長々と呪文のようなclearfixコード。いろいろ検証してコードのダイエットに挑戦しました。今回はその途中経過っす。 [read more]
(tracked on 06/16/2007)
» Clearfix from "おっちゃんのメモ帳"
ふらふらとCSSのテクニックを探っていたらClearfixという手法を発見したのでのしておきます。 Clearfixとは親要素の背景や枠が途中から出なくな... [read more]
(tracked on 07/21/2007)
» clearfixのバリエーション from "Lepracaun's factory"
CSSで2カラムレイアウトした際に生じるfloatに関する問題について。 親ボッ... [read more]
(tracked on 08/19/2007)
» links for 2007-08-21 from "hands in hands"
スタイルシートをめぐる冒険: clearfixの決定版を作る 〓モダン... [read more]
(tracked on 08/22/2007)
» clearfixでfloat解除 from "maiの中身（ruby on railsシステム開発）"
こんにちは。最近Rubyをあんまり触ってないmaiです。 あんまり触ってなくて、Rubyについてあまり語れるほどのことが無いので、今日はstyleshee... [read more]
(tracked on 05/02/2008)
» clearfix from "CSS Lecture"
Webサイトを作るうえでclearfixを知っておかないとけっこう困ったりすると... [read more]
(tracked on 05/27/2008)
» clearfixで下マージン(スペース)が発生してしまう from "TREND SPOTTING"
普段あまり意識せず使っていたclearfixで、適用したボックスの下にマージン(... [read more]
(tracked on 01/22/2009)
