フルCSSレイアウトをマスターする上でも重要になりますので必ずマスターしてくださいね。
さて、前回はIE6のバグでしたが今回はfloatの解除に関する問題です。
基本的にfloatを使ったら必ずclearで解除すると覚えて下さい。
このエントリでは、<img>要素にfloatを付けて文字を回り込ませるという使い方ではなく、
<div>等のブロックレベル要素をfloatしてレイアウトを組む時の方法になります。
ブロックレベルとインラインレベル
まず、「ブロックレベル」と「インラインレベル」ってご存知でしょうか。
htmlタグと呼ばれる要素は２種類に分別することができます。それが上の２つです。
見分け方はいたって簡単で、並べると横に並んでいくか縦に並んでいくかの違いです。
ブロックレベル要素...並べると縦に並んでいく
(例)<h1>,<p>,<div>,<table>,<ul>
インラインレベル要素...並べると横に並んでいく
(例)<a>,<span>,<img>,<font>,<strong>
たいていの場合、<div>要素を使ってレイアウトをすると思いますが、
この<div>はブロックレベル要素ですので本来横に並ぶことはありません。
だから、floatを使用して複数の<div>を横に並べるという作業が必要となるのです。
解除をしないとどうなるか
Firefox
IE7
IE6
Google Chrome
Opera
またブラウザによって分かれてしまいますね。
ちゃんと解除しないといけないことが分かります。
clearを追加してみる
それでは、上記のソースの#box3にclear: both;を追加してfloatを解除してみます。
Firefox
IE7
IE6
Google Chrome
Opera
まだ統一されないですね。
どこが違うかと探してみると、IE以外は#box3のmargin-top: 50px;が効いていません。
先ほどから、floatはclearで解除といっていましたが、実は正確に言うとclearは「floatの解除」ではないのです。
覚えていただきたいのは、clearを使った時にはmargin-topを使わない方がいいということです。
解決法
では、どうすればいいか？
この場合だと#box1か#box2の両方にmargin-bottomを指定することで解決することができます。
他には、#box3の前に空の<div>を作りそこにclearを指定することで#box3にmargin-topが使えるようになります。
clearを使わない方法
以下のコードを親要素に指定する事で解決する事が出来ます。
ここでの親要素は「wrapper」ですので「wrapper」に指定しています。
CSS全文記述すると以下のようになります。
]]>
