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

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

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

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

この記事の目次非表示

#️⃣ clear:both; を html に直接記述して float を解除する
#️⃣ clearfix なる技を発見 @ 2006-06-22
#️⃣ overflow:auto; でやってみる @ 2006-10-31
#️⃣ Internet Explorer 7 対応 clearfix 発見 @ 2007-02-22
#️⃣ 今使っている clearfix @ 2008-07-03

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

HTML のソース

<div> <div>left</div> <div>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;
}

サンプルページ

https://codepen.io/darucub/pen/JoXYPze

▲ clear しているサンプル

https://codepen.io/darucub/pen/EaKVYJp

▲ clear してないサンプル

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

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

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

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

https://codepen.io/darucub/pen/WbwQeqR

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

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

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

https://codepen.io/darucub/pen/wBGKvwz

▲ 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;
}

https://codepen.io/darucub/pen/bNpVGNg

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

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