マークアップをする人で、使ったことがない人はいないであろう「clearfix」。 「floatした要素が親要素からはみ出してしまうのを回避する」ためのものですが、 人によって、記述の仕方に若干違いがあります。 記述に多少の違いはあっても、ちゃんとfloatは解除されているので 特に問題はないのだと思いますが、どうして様々なバリエーションの「clearfix」が 存在するのか、そもそも「clearfix」とはいつから存在したのか、 使われているプロパティにはどんな意味があるのか、 実際のところよくわからないまま使っていたので、この機会にいろいろ調べてみました。
clearfixが初登場したのは2004年5月8日。 オーストラリア人のTony Aslettという人が考えたものです。 それまでのfloat解除の方法といえば、floatを解除したい位置に、 HTML 4.01では非推奨とされている
<br class="clear" />
や、
<div class="clear"></div>
といった、意味を持たない空要素を入れてclearするのが一般的でした。
Tony Aslettの運営するサイト「CSS Creator」にある、当時のソースが以下になります。
.floatcontainer:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
/*Having something in the content such as a period
gives a more consistent results across browsers.*/
この時はまだ「clearfix」というclass名ではありませんでしたが、 それでも、内容は現在使われているものとほぼ同じです。
このfloat解除の手法に、「clearfix」というclass名がつけられたのが2004年5月14日。 「/* Position Is Everything */ – Modern browser bugs explained in detail!」というサイト内のページ 「Clearing a float container without source markup」でTony Aslettのソースを紹介する際に、 初めて「clearfix」というclass名が使われました。 IEとMac IE5.xに対応した記述も付け加えられています。 ※こちらのページは、和訳されています。「構造のマークアップなしでフロートをクリアする方法」
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
これが今日に至るまで、世界中で使われている「clearfix」の原型です。
冒頭で述べたとおり、現在では様々なバリエーションが存在する「clearfix」ですが、 すべての「clearfix」には、必ず疑似要素「after」と「contentプロパティ」が使われています。 これは、「clearfix」が、 「『clearfix』というclass名を付けた要素の『直後』に、『任意の内容（文字列や画像等）を追加』し、 それを『ブロック要素』にしたうえで『不可視』にし、その任意の内容に『floatを解除させる』」 という考え方で作られているためです。
つまり、「clearfix」というclass名をつけた要素のすぐあとに、 ユーザーの目には見えないボックスが作られていて、それが「clear: both;」の働きを しているということです。
様々なバリエーションの「clearfix」においては、必須となるcontentプロパティの中身も、 「.」や「半角スペース」「全角スペース」「何も入っていない」など、様々です。 Tony Aslettが考えたものには、contentプロパティに「.」が入っています。 なぜ「.」が入っているのでしょうか？ 調べてみると以下の理由があったようです。
- contentプロパティに何か入っていないと、ボックスが生成されないブラウザがあった （Netscape7.1ほか、ごく一部のFirefox1.x）
- contentプロパティに何かを入れる必要があったので、「.」を入れた
- 「.」の記述を非表示にするためには「height: 0;」が必要
- しかし、「height: 0;」だけでは高さを消すことができないブラウザがあった （Netscape6ほか、ごく一部のFirefox1.x）
- なので、それを消すために「visibility: hidden;」も必要になった
現在では、ターゲットブラウザにNetscapeが入っているケースはほぼないので、 contentプロパティの「.」と、それを非表示にするための「height: 0;」「visibility:hidden;」、 この3ヶ所はなくてもいい記述になります。 また、Windows・MacのIE5.xも、すでにターゲットブラウザから外れているので、 それらを対象とした記述も削除できます。
こうして、使っている人がその時々の状況に応じて各自でブラッシュアップしていったことが、 現在の「clearfix」に様々なバリエーションが存在する理由なのだということがよくわかります。 それぞれのプロパティが、どんな意味があって使われているのかを知らなくても 「clearfix」を使うことはできますが、意味や理由を知り、理解を深めることで、 より現在のブラウザ状況に応じた「clearfix」を作っていけるのではないでしょうか。
【参考サイト】