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

float を使った時は、float させた div の親にあたる div 内で clear しないと表示がおかしくなるみたい。 下の例で行くと、div#main を閉じる前にクリアしないと、div#main の高さが確定しないらしい。

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

この記事の目次 非表示

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

CSS のソース

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

HTML のソース

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

サンプルページ

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 の決定版を作る -モダンブラウザ編- と言う記事が参考になります。

2 COMMENTS

(ai)

全てのdivにzoomを効かせるとバグに引っかかりやすかったりして危険 レンダリングも多少遅くなる 1人でサイトを作るならまだいいですが、グループワークなら避けたほうがいいと思います

clearfixはコピペで使うことが多いので、多少長くても安全なものを使ったほうが良いのでは? http://kikky.net/pc/float_bg.html

overflow:auto;ではIE5,6で問題が起こります http://kikky.net/pc/css_bug045.html

Bowz

コメント&詳しい解説ありがとうございます。 返事が遅くなってしまいましたが、参考にさせていただきます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です