最近のブログやサイトは2カラム、3カラムが主流です。カラム分けはCSSでfloatを使っている場合が多いです。しかしfloatの解除忘れでは不具合が発生する場合があります。それを解消するのがclearfixです。
ゆめぴょん(@yume_pyon)です。こんちはっ！
ひと昔前のカラム制御はtableタグで行っていましたが面倒でした。floatを使うようになってからは、かなり楽になりました。しかしtableもfloatも本来の使い方にカラム制御はないので、もっと良い手法が現れる気がしています。
しかしまだしばらくはfloatの時代が続きそうです。だからfloatを使う時にかかせない、clearfixについて簡単に説明します。
floatの問題点
メインカラムと、サイドバーの2カラムでブログを作成したとします。その時のCSS（スタイルシート）には、メインカラムには「float: left;」、サイドバーには「float: right;」と設定したとします。
するとメインカラムとサイドバーの両方を囲む親要素に色や背景などを設定している場合、子要素を包み込んでくれないことに気づきます。具体的には親要素の高さがなくなってしまいます。
この現象は子要素にfloatを使うのをやめると、元に戻ります。だから原因はfloatだけです。
1つの解決策：floatの解除
この問題点を解決するために一番簡単な方法は「clear: both;」です。具体的にはfloatを使った後に、下のよう（2とおり）に記述する場合が多いです。
- <div sytle=”clear: both;”></div>
- <br sytle=”clear: both;” />
私もこの記述法は楽なのでよく使います。しかしHTMLの構造的に意味のないタグを記述することになるため、あまりスマートではありません。
もう1つの解決策：micro clearfix
この問題を解決するべく考案された手法が「clearfix」と呼ばれます。これはCSSのみでfloatの解除を行うことができるため、HTMLの構造を崩しません。
そしてclearfixにも改良が加えられました。IE6,7を含むあらゆるブラウザに対応して、しかもコードも短くできる「micro clearfix」が開発されました。具体的なコードは下のとおりです。
.cf { zoom:1 } /* For IE 6/7 */ |
floatを使う要素の親要素に「class=”cf”」を設定するだけで、子要素のfloatを適切に解除することができます。コードも充分に短いので私は好んで利用しています。
まとめ：今日のゆめぴょんの知恵
float解除は他にも「overflow: hidden;」を利用する方法や、IE6,7を無視して更に短縮化する方法などもあります。自分の好みで選べばいいと思います。
「micro clearfix」が開発される過程でもいろいろ考案されたようです。今回はその変遷やCSSの説明ははぶいています。興味ある方は、私も参考にした次のブログを読んでみてください。
◆floatを解除する手法のclearfix と 次世代のレイアウトの話｜Web Design KOJIKA17
◆[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix | コリス
次回の記事は「Web制作のチップ」の予定です。
更新を見逃さないためにも、の登録をおすすめします(^^)/
ゆめぴょん(@yume_pyon)でした。ばいちゃお！ こてっZzz