MID [Serendipity Weblog] - 「Opera」としてタグ付けされたエントリ

「Opera」としてタグ付けされたエントリ

2007年05月27日(日)

clearfixハックは本当に必要なのか

いわゆるclearfixハックネタなのですが、あるブロック内にfloatさせた要素を並べると、状況によってレイアウトが崩れるわけです。こいつを綺麗に整えるためにはfloatさせた要素の後でclear:leftなどで一旦解除させる、というのがclearfixの原点のように思います。
最近またこの手のネタがはてブで盛り上がっているようです。

floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（
）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。

少し遡って

解決法は2つある。ひとつは、「原因」で指摘している回り込みの解除を用いる方法（→サンプル2）。ただ、「HTMLは論理構造を記述し、見栄えはスタイルシートで定義する」という本来のあり方からすると、HTMLの中にレイアウトを制御する以外まったく意味を持たない要素が入り込んでくるのはやや気になる。もうひとつは、全体を囲むボックスに高さを与える方法（→サンプル3）。ただし、コンテンツがテキスト主体で、高さを特定できない場合はこの方法を使えないのが難点である。

私といえばclearfixは実は一度も使ったことがなく、全て以下の方法で回避しています。

floatを内包する親ブロックにwidthとoverflow:autoを指定する。
詳細は「http://ms-k.serveblog.net/archives/152-CSS.html」に書いてあります。

HTMLソースとCSSは上記サイトから拝借しました。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="test.css" type="text/css" />
<title>クリアフィックスの実験</title>
</head>

<body>

<div class="column">
<div class="box-A"> </div>
<div class="box-B"> </div>
</div>
<div class="column">
<div class="box-A"> </div>
<div class="box-B"> </div>
</div>

</body>
</html>

body {
	background-color: #ffffff;
}
.column {
	width: 125px;
	margin-bottom: 5px;
	/* ↓これ */
	overflow: auto;
}
.box-A {
	width: 60px;
	height: 60px;
	background-color: #ff0000;
	float: left;
}
.box-B {
	width: 60px;
	height: 30px;
	background-color: #00ff00;
	float: right;
}

以下、レンダリング結果

Firefox2

Opera9

Safari1.3.2

IE6

IE7

Mac IE5

あまりにもclearfixが有名なので若干自信がないのですが、
それって要らないんじゃない？
と思っているのって私だけ？
でも、Lucky Bagさんの突っ込みも無いようだし、ここまで書いてさらに自信が…
他に何か盲点があるのかなぁ。

20:45 追記
うわっ。3ping.orgのwuさんからコメントいただきました。
MacIEがポイントですか。やっぱ。
以前、身内から指摘されたこともありまして、うすら予想はしていました。
上記の例に限っては問題無い（スクリーンショット追加しました）ようですが、状況によってはスクロールバーが出ることがあるようですね（シカトモードに入ってますけど）。

それを踏まえても今のところ自分的にはclearfixは不要かと判断しています。
今さらMacIEとつきあうにはさらなるとんでもない泥沼が待ち受けていますから