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 のソース

left

right

head

### サンプルページ

– 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 を除外 */