kzms2 – html,css,javascript

clearfixについて

このエントリーでは僕が業務で使用しているclearfixについてちょろっと書いてみたいと思います。
色々見てみましたが他の方の記事にはなかったようなので・・・（近しいのはありましたが）
CSSを始めて、誰もが困る表示を解決してくれるclearfix。
基本を知っている方でも、この方法は知らない方も居そうなので是非興味がある方はご覧下さい。

clearfixって何？

と思う方は以下のリンクを読んで見てください。

• clearfixでfloatを解除 | d-spica
• clearfixとは – webデザイナーのメモ – Yahoo!ブログ

では詳細は続きから。

一般的なclearfix

一般的に知られているclearfixは2通りあるかと思います。

content:” “;型

Coliss様より引用/* new clearfix */
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:” “;
clear:both;
height:0;
}
* html .clearfix{zoom:1;}/* IE6 */
*:first-child+html .clearfix{zoom:1;}/* IE7 */

というような「content:”";」などを用いる形が一番一般的かと思います。
これは昔からあるやり方ですね。
個人的にはclassとして使わないと若干長ったらしいのがちょっと気になります。

overflow:hidden;型

CSS HappyLife様より引用#main .section{
overflow:hidden;
}
* html #main .section{
height:1%;
}

これはoverflow:hidden;を使うと子要素の高さ分、親要素がその高さになるという性質を利用しているものになります。（原文どこだか忘れました…）
僕が主に使っているのはこちらの方のclearfixなのですが、ちょろっと変えて使っています。

というわけでやっとですが2行で終わるclearfix

サンプルはこちら#contents{
overflow:hidden;/* モダンブラウザ */
_zoom:1;/* IE6以下 */
}
以上です。どうです簡単ですね！
有効なブラウザは、IEは5.5からと古すぎないVerのモダンブラウザ(Firefox,Safari,Chrome,Opera)です。

ちなみに「_プロパティ:値;」という様にアンダーバーをつけるとIE6以下に適用されるハックになります。
この書き方が嫌いな人は「_zoom:1;」の部分を「* html」ハックにして、以下の様にして頂くしかないですが…
#contents{
overflow:hidden;
}
* html #contents{
zoom:1;
}
個人的にはアンダーバーを使用する場合が多いです。
validな方と戦うつもりはありませんが、自分は仕事でソースを記述するときには、お客様がキチンと見れて、運用する際にも楽に出来るほうを選ぶようにしています。
ですがソースが汚いじゃないか！と思う方はvalidな書き方にして頂いてよいと思います。
※ちなみに余談ですが、「*プロパティ:値;」とすると、IE7以下に有効なハックとなります。余談です。

overflow:hidden;系を使う上での注意点

注意として、overflow:hidden;を使っていて、その要素内でposition:absolute;を使ってウィンドウの様なものを表示させようとすると、隠れてしまうという致命的な欠点があります。

※Firebugでソースをいじって、NGな例を再現した画像です。
その場合は、従来のclearfixを使ってもらったほうが良いかとは思います…がこの条件に当てはまらない場合はどんどん使ってよいかと思います。

まとめ

というわけでまとめです。
ちなみに、classにしないで対応する場合の手法を明記します。classにしたい方は書き換えて使えばよいかと思います。

大体の場合

以下のソースを使ってclearfixを適用します。
#contents{
overflow:hidden;/* モダンブラウザ */
_zoom:1;/* IE6以下 */
}

例外の場合

上記にあるように、要素内でposition:absolute;を使ってウィンドウなどを表示させたい場合は、スタイルシートをめぐる冒険: clearfixの決定版を作る －モダンブラウザ編－様が一番良いとしているケースを応用して

#contents:after{
content:”";
display:block;
clear:both;
}
#contents{
_zoom:1;/* IE6以下 */
}

とするのが無難だと考えられます。
自分はこの手法で問題は起きていないですが、問題が起きた方はご連絡いただければ対応方法を考えたいと思います（判れば…）