[ CSS ] float を使う時の注意点 ( clearfix の使い方 )

float を使った時は、float させた div の親にあたる div 内で clear しないと表示がおかしくなるみたい。

下の例で行くと、div#main を閉じる前にクリアしないと、div#main の高さが確定しないらしい。

それから、float させる時は、width 指定を入れておくのが基本らしいです。

#️⃣ clear:both; を html に直接記述して float を解除する

HTML のソース

<div id="main">
    <div id="left">left</div>
    <div id="right">right</div>
    <div style="clear:both;"></div><!-- ← ここが大事！ -->
</div>
<h1>head</h1>

CSS のソース

#main {
    width: 400px;
    background-color: #CCCCCC;
}
#left {
    float: left;
    width: 100px;
    background-color: #999999;
}
#right {
    float: right;
    width: 100px;
    background-color: #999999;
}

サンプルページ

▲ clear しているサンプル

▲ clear してないサンプル

いちいち、clear するの面倒くさいですねー。 どうにかならんかな？

ただし、上の方法には clearfix + Dreamweaver CS3 デザインビューのレイアウト崩れを防ぐ 効果がある。

#️⃣ clearfix なる技を発見 @ 2006-06-22

余計な div を追加しないですむ clearfix と言う技がありました。 この技を編み出した人へ感謝。

▲ clearfix を使ったサンプルページ

#️⃣ overflow:auto; でやってみる @ 2006-10-31

親ボックス内で回り込みの解除をしなくても overflow:auto; の指定をしておくと、子ボックスの高さに合わせて、親ボックスの高さが拡張されるみたい。

▲ overflow:auto; を使ったサンプルページ

#️⃣ Internet Explorer 7 対応 clearfix 発見 @ 2007-02-22

clearfix の Internet Explorer 7 対応版 があったので、そちらを参考にしてみました。 ありがとうございます。

確かに、以前に比べてコードがスッキリしてますね。IE5.5 から IE7 で使えるんだそうな。

それにしても、参考ページのサンプルコードでは、div 全部に適用してるんだけど、大丈夫なんだろうか？ 私の場合、クラス指定で使おうと思っているので、CSS ソースは下のようになりました。

.clearfix {
    zoom: 1; /* for IE5.5 - IE7 */
}
.clearfix:after { /* for modern browser */
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

▲ Internet Explorer 7 対応 clearfix のサンプルページ

#️⃣ 今使っている clearfix @ 2008-07-03

zoom: 1 はレンダリングが遅くなると言うコメントを頂いたついでに、いろいろ変えた。

#container,
.clearfix {
    display: inline-block;
}
#container:after,
.clearfix:after {
    content: ".";
    font-size: 0.1em;
    line-height: 0;
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
/* ここから Mac IE5 を除外 \*/
* html #container,
* html .clearfix {
    height: 1%;
}
#container,
.clearfix {
    display:block;
}
/* ここまで Mac IE5 を除外 */

※ あらかじめ float を解除しなければいけない div 要素がわかっている場合は、clearfix のコードに直接 class, id を直接記述しておくと簡単・便利です。

clearfix に関しては、スタイルシートをめぐる冒険: clearfix の決定版を作る －モダンブラウザ編－ と言う記事が参考になります。

現場からは以上です。それでは、またッ！！！

[PR] ご自宅で本場香川県の「讃岐うどん」はいかがですか？

最後までお読みいただきありがとうございます！
スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！