clearfixはちゃんと考えられていた
clearfixはちゃんと考えられていた
* Posted by: wu
* 2007年5月26日 11:42
* XHTML CSS
clearfixの決定版を作るについてコメントしたのですが、なぜか僕のTypeKeyが認証失敗になってしまい、がんばって書いた文章がお伝えできず、消すのももったいないからこっちに書きます。
こんにちは。 僕も以前、clearfixの記述について、なぜあんなに複雑なのか疑問に思いました。CASE10の記述がfloatのclearに必要な最低限の記述とし、ピリオドやvisibility,heightは必要無いんじゃないかとさまざまなブラウザーで検証したのですが、contentで何かを記述しないとボックスが生成されずに正常にクリアできないブラウザーがありました。そして、生成したボックスを消すために、visibilityやheight:0が必要になりました。
モダンブラウザの中でも特にモダン（笑）なものに限ればCASE10だけで大丈夫のようです。ただやはりこういったものは出来るだけ多くのブラウザで同じ結果になったほうが喜ばしいので、ややモダンではないモダンブラウザを考えるとどうしても冗長になってしまいますね。
ああ、むくわれた。全ては上のコメントの通りです。
ホップ本でも「親ボックスの高さを算出させる方法」を7ページ使って解説しているのですが、この原稿を書くときに「本家clearfixの記述には絶対無駄がある！」と睨んで色々検証しました。
まず、contentプロパティになぜピリオドを入れるのかですが、たしかFirefox1.x(凄い細かいバージョン)かNNでは、空白でもなんでも何かを記述しないとボックスが生成されずにclearできませんでした。そして、記述した文字を消すために、height:0が必要になりました。 ところがheight: 0だけでは消えないブラウザがあり、visibility:hiddenが必要になって… と、 結局本家の記述とまったく同じになりました。 NN6.xとFirefoxの1.x(凄い細かいバージョン)で問題があったことだけは覚えています。
どのブラウザがいつのバージョンのときにピリオドがないと有効にならないのかどうも思い出せないので、contentプロパティの値を空にしたclearfixを使ったページを張っておきます。3つの黄色いボックスが青い線に囲われていないブラウザがあったら…それだ!! (本当はもう一度ちゃんと調べてきちんとした答えを出したいのですが、時間と環境がありません。すみません ぺこぺこ)
もう１つ
clearfixはclassにしてHTML文書に埋め込むよりも、CSS内で対象となる要素をセレクタにもってきて内容をに当てて使ったほうが便利です。
div#content:after,
div#utilities:after,
ul#globalNavi:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
追記：関連記事
* 俗に言う clearfix と言われるコードのバリエーション色々
* clearfixハックは本当に必要なのか
関連エントリー
* HTML たん。
* Vicuna カスタマイズサイト Part2
* 何のための道具?
* HTMLは道具
* サブスキン CSS
* Newer: Vicunaのキーカラーを一発調整するCSSモジュール
* Older: CSSNite LP, Disc3 行ってきたよレポート
Comments:23
nori 2007年5月26日 16:36
clearfixの決定版を作るを書いたnoriです。なるほど、ピリオドには意味があったんですね（当たり前ですが）。少しスッキリしました。TypeKeyの認証失敗についてはチェックしてみます。
wu 2007年5月26日 17:10
Cくん、君のことは忘れない!
wu 2007年5月26日 17:14
noriさん、こんにちは。
そのようですね、ただこの記事の通り、ピリオドが無いと正しくクリアできないブラウザがなんなのか特定できていないので説得力がありませんが…。
matou 2007年5月26日 19:18
はじめまして。Hop本の愛読者です。IE7では思いっきり青い枠が狭くなっていて、Boxの上部に鎮座されておりました。
最後の「もう一つ」の箇所、参考になります。classで指定することしか考えていませんでした。ぜひ試してみたいと思います。
wu 2007年5月26日 21:18
matouさん、こんばんは。 Hop本買っていただいてありがとうございます。
IE7はafter擬似要素に対応していないので、別の対処が必要になります。そしてややこしいことに、DOCTYPEスイッチによって互換モードと標準モードで方法が2つ存在しています。
ホップ本のp.188とp189(幅を明示できない場合)の2つの記述が僕の中でのclearfix決定版なので読んで見てくださいね。
osuko 2007年5月27日 13:17
clearfix本家とか、afterの記述以外に色々宣言がありますけど、これはなんですか？
wu 2007年5月27日 15:31
osukoさん、こんにちは。
clearfixには、レガシーブラウザでも同様の問題を解決させるための指定がなされています。ややこしいことに、レガシーブラウザーで解決するための記述は、モダンブラウザへは悪い影響を与える指定となるものがあります。
こちらを立ててはあちらが立たずとなってしまうので、特定のブラウザのみ読み込むハックテクニックを利用して宣言は複雑化しています。
MacIEを対象からはずすともっとさっぱりするでしょうし、IEがafter擬似要素に対応することで、clearfixはCASE10の記述のみで解決できるものとなるでしょう。
製作者がfloatの問題に直面したとき、特に知識もいらずにコピペで解決できるよう(あんまり良くない考え方ですが)に作られたものであって、できるだけ多くのブラウザで解決できるように作られているだと思います。
豪 a.k.a aji 2007年5月28日 09:18
「値を空にしたclearfixを使ったページ」の色使いが凄くかっこいい。
ごめんなさい、内容に関係ないコメントで。
でも、ホンマにかっこいいです。
wu 2007年5月28日 13:56
ajiさんこんにちは。 ajiさんはコントラストの強くインパクトのあるデザインが好きなんですね。僕も大好きです。
関係ないコメント大歓迎です。
wu 2007年5月28日 20:21
はてぶコメントに感想を書くのはいいと思いますが、質問であるならこちらにして下さる答えやすいです。
どうぞお願いします。
e-luck 2007年5月29日 00:17
あぅ、トラックバック弾かれてるぅ
wu 2007年5月29日 09:31
がーん！
ois- 2007年5月29日 20:36
こんばんは。
on the next level 更新してください
おねがいします
wu 2007年5月29日 21:18
oisさん、こんばんは。
UOは僕のHDDから抹消されています…！
qeb 2007年6月 4日 10:39
はじめまして。
子要素がフロートしている親要素に対して幅を決めてあげて
それとoverflowをhiddenにすると、自動的に子要素の下まで
親要素が伸びます。
{ width: 100%; overflow: hidden; }
それでは、ダメですか？
p 2007年6月 4日 11:30
記事末尾にある
Clearfixは本当に必要か という記事でwuさんとe-luckさんがコメントしています。
http://ms-k.serveblog.net/archives/167-clearfix.html
読む限り、どちらでもいいようですが、NN7.1のバグで引っかかるようです。
qeb 2007年6月 4日 11:39
補足です。
overflow: auto;だと、場合によってスクロールバーエリアが出たことがありました。
個人的には、overflow : hidden;にしています。
p 2007年6月 4日 15:01
NN7.1ではoverflow: hiddenでは内容領域の高さがなくなってしまうバグがあるようです。
Zoorasia 2007年6月16日 03:11
はじめましてZoorasiaと申します。ホップ本愛読者ですっ。さて、clearfixになぜcontentプロパティにピリオドとかが必要なのかが、分かり凄く参考になりました。 サンプルに関しては自分が持っているブラウザではレイアウト崩れが再現できず、一体どのバージョンのブラウザで崩れるのかが気になるところです。
自分が初めて見たclearfixはline-height とかfont-size とかも入っており、記述が多すぎて どんだけーっ！？て感じでした。
今後clearfixを使用するときは、やはりcontentプロパティに何かしら記述したりするほうが安全ですね。
wu 2007年6月16日 15:37
Zoorasiaさん、はじめまして。書き込みありがとうございます。
clearFixはなんだか意味不明な記述ばかりで ドゥオンダケェ！ですよね。 line-heightやfont-sizeも、もしかしたら私の知らないブラウザに対する処置なのかもしれません。
MacIE5とWinIE6が「無視してok!」という時代になればclearFixもドゥオンダケ簡単になることか、辛抱辛抱 >,
kz 2007年6月25日 17:37
Firefox 1.0～1.5まで、マイナーバージョンを含めすべて見てみましたがどれも正常に表示されました！
Zoorasia 2007年6月27日 02:25
試しにVPCに入っていたNN 6.xとかFirefox 0.8とか、普段は検証しないOpera 6.xとかでも見てみたけれど、レイアウト崩れが発生しませんでした。やはり、ものすごく細かい一部のバージョンで発生するんですね...。（この検証、本当に時間がかかったと思います…）
個人的には、content空の省略版 clearfix採用でも良いような気が…（笑
wu Author Profile Page 2008年6月14日 22:04
みなさま、コメントありがとうございます。
noriさんの書かれた記事 「clearfixの決定版を作る」に追記があり、僕の記事の問題と、それを踏まえた決定版を紹介していますので、もう一度紹介元の記事をご確認ください。
