俗に言う 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 読み込ませないようにしている。

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

IE7 向けハックを使ったパターン

*:first-child+html が IE7 しか読み込まないことを利用している


/* 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 としている。

.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 じゃなくなるんで、それが嫌ならコンディショナルコメントとかで別にリンクした方が良いかもしれない。

.clearfix {
  zoom: 1
}

いくつか書き出してみて気づいたけど、結構きりがない。とりあえずここまで。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/6

MID [Serendipity Weblog] - clearfixハックは本当に必要なのか (2007年5月27日 11:40)

いわゆるcleafixハックネタなのですが、あるブロック内にfloatさせた要素を並べると、状況によってレイアウトが崩れるわけです。 こいつを綺麗に... 続きを読む

Comments

e-luck said:

今気付いたんだけどタイトルの日本語おかしいや :P