CSS Radar

CSSのみでFloatをクリアする - Clearfix

クリアする必要のあるdivなどにclass=”clearfix”を追加すれば、
HTMLに{ clear: both }を設定したClassやbr clear=”all”などを追加することなくFloatをクリアできる。

.clearfix { display: inline-block; }
.clearfix:after {
     clear: both;
     content: " ";
     display: block;
     font-size: 0;
     height: 0;
     visibility: hidden;
     }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

なぜFloatはクリアしなければならないのか？

Floatした要素をクリアする要因はいくつかあるが、ここではコラムレイアウトを実現するためのFloatをクリアする理由を説明しよう。

例えば2コラムレイアウトをCSSで作成するために

<div id="header"></div>

<div id="container">
  <div id="left"></div>
  <div id="main"></div>
  <div id="right"></div>
</div>

<div id="footer"></div>

というようなHTMLとなったとする。
仮にdiv#leftにfloat:left;、div#rightにfloat:right;を指定したとする。

• 親要素(Parent Element)が例のように子要素(Child Element)にfloat要素のみを含む
• div#containerには高さをあらかじめ設定できない(ブログなどは通常設定できない)

そんな場面はよくあるが、
この場面でdiv#containerはクリアしなければ、div#containerのheightは子要素のheightと連動しない。
div#containerが単なるボックスである場合、このバグには気がつかないが、背景を敷いていたり、ボーダーを引いていたりすると、表示がおかしくなってしまう(Mozilla系ブラウザバグ)。

具体的には上図のような状態になる。

.clearfixの説明

それでは、10数行のCSSがこの仕様にどのように対応しているのか見ていこう。

1. display: inline-block;はIE/Macにおいて、widthを指定しないでfloatするとwidth:100%と同等に指定されるbugを修正。
2. .clearfix:after〜では擬似クラス:afterを利用し、content: ” “;でスペースを挿入、そのスペースを、display:blockでブロック要素化(clearはブロックでなければ適応できない)、そしてclear:bothでクリア。念のため、font-size: 0;、height: 0、visibility:hidden;で追加したスペースが余分なスペース表示とならないように設定。(擬似クラスはIEではサポートしていない)
3. コメントバックスラッシュハックを利用しIE/Macから次行以降をコメントアウト
4. IEのみを対象に(スターHTMLハック)、height: 1%;でIEで子要素がfloat要素をのみを含む場合でも親要素のheightを調整する仕様を動作させる(ホーリーハック)、このハックはIEのギロチンバグも修正する。
5. 1行目で指定したdisplay: inline-block;を IE/Winにて{display: block;}で上書きする

参考サイト

• How To Clear Floats Without Structural Markup
• Lessons Learned Concerning the Clearfix CSS Hack
• CSS Float Theory: Things You Should Know
• Floatutorial