俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag
俗に言う clearfix と言われるコードのバリエーション色々
clearfix ネタに乗っかってみる。
* スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－
* clearfixはちゃんと考えられてた
.clearfix:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
.clearfix {
_height: 1px;
min-height: 1px;
/*￥*//*/
height: auto;
overflow: hidden;
/**/
}
ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる部分の規則集合はほぼ一緒だったりする。だけど、その後（上記コードの強調部分）ってのは結構色々とバリエーションがあったりするんで、自分が知っているパターンをいくつか紹介してみる。
それぞれの説明やどれが良いとかは省略。そのコードを説明しているサイトにリンクしておくんで、興味があるようでしたらそちらを参照してください。ちなみにリンクしたそのサイトがそのコードの orgin ではないかもしれません。以下の全てのコードは :after 擬似要素使って content 生成する規則集合部分は省略（つまり、上記コードの強調部分のみという事です）。あと、あくまで便宜上セレクタを .clearfix としているけど、使う場合は対象セレクタに適宜置き換えて適用させるのが吉。
xmlns 属性を使ったパターン
属性セレクタを使って IE6 以下に display:block 読み込ませないようにしている。
* CSS clearfix
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
IE7 向けハックを使ったパターン
*:first-child+html が IE7 しか読み込まないことを利用している
* ClearFix - CSS - Snipplr
/* WinIE7 only */
*:first-child+html .clearfix{
height:1%;
}
/* WinIE6 and below */
/*\*/
* html .clearfix{
height:1%;
}
/**/
/* MacIE only */
/*\*//*/
.clearfix{
display:inline-table;
}
/**/
inline-table を使ったパターン
inline-table の指定はマック IE 向け。ひとつ前のやつは inline-table をマックにのみ読み込ませているけど、こっちは逆で最初に inline-table の指定を読み込ませて、その後にマック以外に block としている。
* IE7 display fix | drupal.org
.clearfix {
display: inline-table;
min-height:1%;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac *//
zoom を使ったパターン
ちょっと番外っぽいけど、IE 向けに zoom プロパティを利用する。valid じゃなくなるんで、それが嫌ならコンディショナルコメントとかで別にリンクした方が良いかもしれない。
* Clearing floats without structural markup in IE7 | And all that Malarkey
.clearfix {
zoom: 1
}
いくつか書き出してみて気づいたけど、結構きりがない。とりあえずここまで。
