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

2007年05月27日(日)

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

floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、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とつきあうにはさらなるとんでもない泥沼が待ち受けていますから

投稿者 MS-K in Web Design at 11:06 | コメント (9) | トラックバック (0)

< ムゲンバイン合体コンテスト | 札幌で最高のフランスパンといえば >

このエントリーに定義されたタグ: css, Firefox, IE6, IE7, Opera, Safari

タグに関連するエントリー一覧:

トラックバック

このエントリのトラックバック URI を指定する

トラックバックがありません

コメント表示形式 (一覧 | スレッド)

こんにちは。
overflow: autoでの高さの算出はafter擬似要素と同じぐらい安全に使えて、さらにシンプルな記述になるのですが、ここでMacIEに対応させようとするとclearfixが1歩有利なんですよね。
また、IEのボックスサイズの解釈の違いでwidthを明示できない場合もあるので、clearfixはさらにややこしくなっています。
clearfixも数年後にはもっとシンプルな記述になってゆくと思います。

#1 wu (Link) 日時 2007-05-27 12:19 (返信)

どもです。
overflow使った方法は過去（http://www.lucky-bag.com/archives/2005/03/float_overflow.html）に書いた事があるんですが、そのあと色々調べてみたらautoとするとマックIEでスクロールバーが出てしまったり、hiddenとするとネスケ7.1で表示されなくなってしまったりとちょっと問題があって、そこら辺を捨ててしまうんであればシンプルな方法だと思います。個人的に究極に手軽なのはzoomプロパティ使った方法かなあとは思っているのですが。

#2 e-luck (Link) 日時 2007-05-27 20:50 (返信)

何が驚いたって、コメントがいきなりwuさんとe-luckさんのものだったことです。せいぜい身内からだと思ってたら（笑）

でですね、私の場合、捨て所を考えています。
予算と時間の都合も当然ありますが、全てに対応しようと思っても残念ながら不可能に近いものがありますので。
ここもしかり。
MacIE5ではえらいフォントサイズが小さいですし、全部センター揃えになるし。
WinIE7ではブロック幅がおかしいはず（これは何とかしようと思います）。

ユーザー数とかで判断するのではなく、ブラウザアプリケーションの存在の意味が少ないものを省いているつもりです。
そういうわけで元ネタに乗って、モダンブラウザと呼ばれるもの及び泣く泣くIEでの検証ということで、お茶を濁しています。

#3 MS-K (Link) 日時 2007-05-27 21:16 (返信)

こんにちは、clearfixのことを調べていて流れ着きました。

overflowで回避する方法だと、win版IE6（でしか確認していませんが）でホイールクリックの矢印を出してスクロールする操作が不可になるのが少し面倒です。
縦スクロールはホイールを転がすので良いのですが、横スクロールがある幅広なショッピング系サイトなどでは逐一横スクロールバーをドラッグしにいくのが億劫なのでホイールクリック→左右移動が使えないとちょっと不便に感じてしまいます。

確か、IBMのノートPC「ThinkPad」などで採用されているポインティングデバイスでも同じような症状が出たと記憶しています。
（ノートPCは画面が狭いので余計に...ですね。）

状況限定すぎてナニですが、なんとなく思ったのでコメントさせていただきました。
失礼しました。

#4 SAI 日時 2007-06-19 18:44 (返信)

SAIさん、コメントありがとうございます。

> overflowで回避する方法だと、win版IE6（でしか確認していませんが）でホイールクリックの矢印を出してスクロールする操作が不可になるのが少し面倒です。

あら、実はこの場面には直面したことが無いです。。。
横スクロールってことは固定幅レイアウトの場合になるのかなぁ。
時間を見て検証したいと思います。

#4.1 MS-K (Link) 日時 2007-06-19 20:27 (返信)

レスありがとうございます。

どこそこのサイトでこの現象が発生する...というのはすぐに挙げられませんが、御サイトだと
～
に囲まれた領域はホイールクリックの機能が使えません。
それ以外の領域（ローカルエリア等）では問題なく機能します。

横スクロールが発生し得るのは固定幅で横を広めに取っているサイトですが、幅が固定だからとか、横スクロールするから、という要因に関係なくこの現象は起こりますね。
単純にIE（OS等の環境にも依存するのかもですが）のバグというか仕様ではないかと思います。

純粋にバグだと思うと改善方法がサッパリ思いつかないのがなんとも言いがたいところです･･。

#4.2 SAI 日時 2007-06-21 00:34 (返信)

タグ打てなかったんですね、すみません；
「～」の部分は、

divのclass「serendipity_Entry_Date」に囲まれた領域

でした。

#4.2.1 SAI 日時 2007-06-21 00:44 (返信)

overflow: auto;だとWinIE5でずれますよ。
height:1%;とかして
WinIE以外にheight:auto;するといいです。

http://kikky.net/pc/float_bg.html

なぜoverflow: auto;で背景が出るのかという理論からすればclearfixのほうがいいかもしれませんが、overflow: auto;で問題がないようですし、簡単なんでどっちがいいかの判断は分かれるところだと思います。

#5 hama (Link) 日時 2007-08-20 17:17 (返信)

> overflow: auto;だとWinIE5でずれますよ。
IE5はさすがにインストールされているマシンが無いので、検証対象外にしています(^^ゞ

私自身は、CSSの条件分岐でIE7未満については、いただいたコメントと同様 height:1%; overflow:visible; で上書きするようにしています。

clearfixって、表示上は要らない「.」や「」が入るのが気持ち悪くて嫌いです

ところですごい充実したサイトですね！
ゆっくり拝見させてもらいたいと思います。
ありがとうございました。

#5.1 MS-K (Link) 日時 2007-08-21 09:57 (返信)

コメント追加

お名前
電子メール
ウェブサイト
返信先
コメント	電子メールアドレスは表示しません。通知にのみ使用します。 HTMLタグは削除されますので、表現上必要な場合は全角をお使いください。 To leave a comment you must approve it via e-mail, which will be sent to your address after submission. 標準的な感情表現、 :-) や ;-) といったものは画像に変換します。
	入力情報を記憶しますか? このエントリを購読する