だるかぶ
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
float を使った時は、float させた div の親にあたる div 内で clear しないと表示がおかしくなるみたい。
下の例で行くと、div#main を閉じる前にクリアしないと、div#main の高さが確定しないらしい。
それから、float させる時は、width 指定を入れておくのが基本らしいです。
#️⃣ 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 の決定版を作る －モダンブラウザ編－ と言う記事が参考になります。
現場からは以上です。それでは、またッ！！！
だるかぶ