見直されるCleafix

私がはじめてClearfixを知ったのは大学3年生のときでした。
Web系の雑誌（CreatorかDesigningか忘れましたが）を読んだのがきっかけだったのですが、
そのときの驚きは本当に大きかったように思います。
（ちなみにそれまではずっと空divを使っていました。汗）

それからこの仕事に就いて、他の人のソースを見てoverflow:hiddenを使ってフロートを解除する方法を知りました。

一時期、overflow:hiddenを案件で使ったこともありますし、
clearfixクラスを使わず、フロートを解除したいセレクタを複数指定し、それぞれにclearfixをかける方法もしました。

ですが今は結局、floatをクリアしたい要素に個別にclearfixクラスをつけるように、自分の中ではしています。

前置きが長くなりましたが、なぜそこに行き着いたのか、記事を元にご説明します。

---

Saying Goodbye to the overflow: hidden Clearing Hack
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

簡単に記事の内容を書きますと、（原文の訳ではなく、私の解釈です）
---
まず、「Clearfix」にもうちょっと意味的な名前をつけたらどうか、という提案です。
「Handcrafted CSS」という本でそのような内容が書かれていたことを紹介しています。
（この本、あまりに面白そうだったので注文してしまいました。
円高の魅力に負けAmazon.comで注文したのでShippingにめちゃめちゃ時間かかりそうですが・・・）

そして、一番の理由になるのは、CSS3の新プロパティ、「box-shadow」でしょう。
box-shadowは、ボックスにドロップシャドウのような効果をつけるものなのですが、
それが、overflow:hiddenを使用していると切れてしまうのだそうです。
---

将来的には、display:box;でレイアウトをするようになると思いますので、
floatの解除にoverflow:hiddenは使わなくなるかもしれません。

ただ、CSS3はIE9からしか本格対応されないわけですし、
『プログレッシブ・エンハンスメント』とはいえ、
ボックスが角丸にならないことや、シャドウがないくらいなら許されますが、
さすがにレイアウト崩れは見逃しがたいなぁとは感じています。

だからしばらく、floatを使ったレイアウトはなくならないでしょうし、
それゆえにoverflow:hiddenもまだまだ使いどころがあると感じています。
ですから、box-shadowを使う際は注意したいですね。

---

私は以前、『無駄なIDやクラスをつけない派』だったのですが、
やはり実案件をやってみて、
『ソースを再利用する、マークアップの例外に備える』ことも大切だということに気づき、
もっぱらクラス付与派です。
（ただ、デフォルトのpタグにまでクラスをつけるのはやりたくないですが・・・）

案件によっては、CSSを調整することが難しく、HTMLだけで何とかしてくれといわれることもあり、
Clearfixに限ったことではないですが、その際やっぱりクラス付与型にしておくとメンテナンスが楽なんです。


・・・自分もだいぶ変わったなぁ・・・・・・（遠い目）


新しい技術が出ることによって、今までのマークアップもコーディングもだいぶ変わっていくでしょうね。
というより、自分のやり方、古いやり方を再考するきっかけにしなければと思いました。

---

記事を書くきっかけをいただいたサイト

clearfixハックは本当に必要なのか：
http://blog.till-daylight.org/archives/167-clearfix.html

Saying Goodbye to the overflow: hidden Clearing Hack：
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

【おまけ】短いClearfixはじめました。
A new micro clearfix hack：
http://nicolasgallagher.com/micro-clearfix-hack/