【CSS】zoom を使わない clearfix を考えてみた。

内容が全て float していたときに、要素が高さを持てない問題を解決するテクニック "clearfix"。Pickles CSS にも組み込んである。

Pickles CSS の clearfix は次のような実装になっている。

/* 従来の clearfix */
.clearfix{
	display:block;
	width:auto;
	float:none;
	clear:both;
	zoom:100%;
}
.clearfix:after{/*clearfix*/
	content: " ";
	display:block;
	visibility:hidden;
	height:0.1px;
	font-size:0.1em;
	line-height:0px;
	clear:both;
}

:after議事要素とcontentプロパティに対応しているブラウザは、それだけで高さを維持することができる。そうではない古いブラウザ、つまりIE6～7のために、.clearfix本体にzoom:100%;をつけている。

しかし、zoomを使用する方法には1つ問題がある。マージンが相殺されなくなってしまうことだ。display:inline-block; とか overflow:hidden; などを使っても同じ。なんとか、IEでもマージンが相殺されるようにclearfixを適用できないだろうか。

ということで、次の実装を考えてみた。

/* 改良された clearfix */
.clearfix{
	display:block;
	width:auto;
	float:none;
	clear:both;
}
.clearfix:after{/*clearfix*/
	content: " ";
	display:block;
	visibility:hidden;
	height:0.1px;
	font-size:0.1em;
	line-height:0px;
	clear:both;
}
/* for IE */
.clearfix{
	behavior: expression(
		this.innerHTML+='<font><font><font></font></font></font>',
		this.style.behavior = "none"
	);
}
.clearfix font font font{
	clear:both;
}

まず、.clearfix本体からzoomを削除した。それから、下段に追加されたのがIE用のコード。IE用なので、IEの独自拡張 behavior と expression() を使った。

モダンブラウザ用の処理が、「要素の最後に見えない要素を追加し、その要素を clear:both; する。」という発想だから、IE用の処理もこれに倣って、3段に重なる<font>タグを追加し、これにclear:both;を適用した。

本来なら、<div>タグにスタイルを付けて表現したかったのだが、なぜか属性を付けたら文法エラー(?)が起きて動作しなくなってしまった。仕方なく、たぶんHTMLで使われていないであろう、標準外の<font>タグをあえて採用。万が一使われていることも考慮して、念のため3段重ねにした。

zoomを排除したことで、上手くマージンが相殺されるようになった。

• ※この実装は、Pickles CSS の次のバージョン(0.3.5)からの採用を検討中。
• ※サンプルソースはこちらからダウンロード。