前の記事
→簡単そうで覚える事の多い、クセ者floatの話 1日目
→簡単そうで覚える事の多い、クセ者floatの話 2日目
floatを覚える上で重要な事がもうひとつあります。
今日はこんなボックスを作りましょう！
割とよく見ますよね。
画像があって、
回り込んでテキスト。
親のboxには紫の背景色が入ってます。
まず前回の要領で組んでみます。
html
<div id="box">
<img src="hashibiro" width="127" height="130">
<div class="text">
<p>ハシビロコウ</p>
<p>ハシビロコウは、<br>上野動物園などで見ることが<br>できます。</p>
</div>
</div>css
#box {width:320px; background-color:#6666cc;}
img {float:left; margin:15px;}
#box .text {float:right;width:160px; margin-top:15px; font-size:12px; color:#ffffcc;}
#box .text p{font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size:14px; font-weight:bold;}大箱の親div 、imgはfloatさせて、テキストを子divで囲ってfloatさせました。
floatさせたら横幅入れるんでしたよね。
あとはフォントの設定も入れました。
では見てみましょう。
IE
firefox
ありゃりゃ、背景が変です。ieでは途中で切れて、firefoxでは全く出ません。
実は大箱の高さは、floatした場合の小箱の高さを含んでくれないんです。
floatさせるって事は、浮いてる状態なんですね。
だから、大箱には何もない状態になっちゃってるんです。
あっちなみにieが背景ちょっと出てるのは、ieの挙動の方がバグです。
背景が出ないほうが正しいです。
ややこしいよね・・
この辺の解釈は難しいので、自分も間違ってるかもしれません。とにかく、floatさせたら、最後は解除したboxをもう一つ入れないといけないんです。
で、解除するにはclearを使います。
clear:bothを使えば、box内の全部のfloatが解除されるので、普通に高さが認識されます。
基本は、大箱の中にfloatさせた小箱を並べた場合、clearさせたboxで終わらせるのが決まりです。
図でいうとこんな感じ。
でも、今回作ろうとしてるものはfloatさせた小箱２つで完結しちゃいますよね。
無理やり、みたいに、空div作っちゃう事も実はありますが、コンテンツが何もないのに空div作るのは良くないです。ソースも汚くなります。
そこで、どうしてもfloatさせた小箱を並べた状態で大箱divを閉じたい場合に使う呪文があります。
それが「clearfix」です。
原理を説明すると、結構長くなります。知っておいて欲しいっちゃ欲しいですが、めんどくさいので説明は省きます。（それでも知りたい！って方はググってください）
これを一度cssに書きこめば、classで呼び出してすぐに使うことができます。
.clearfix {width:100%;}
.clearfix:after{
content: "";
display: block;
clear: both;}floatさせたdivで終わらせたい場合、親divにこのクラスclearfixを指定しましょう。
ソースです。
<div id="box clearfix">
<img src="a.gif" width="130" height="130">
<div id="migi"><p>ハシビロコウ</p>ハシビロコウは、<br>上野動物園などで見ることが<br>できます。</div>
</div>直りましたよね。背景の画像だけでなく、margin-bottomを親divに指定した場合などもclearfixしないと反映されません。
floatさせたdivの挙動がおかしい場合は、clearの問題をまず考えましょう。
また、float関連のバグもめちゃくちゃ多いので、プレビューしたブラウザとfloatの関係は調べておいて損はないです。
後半めんどくなってしまいましたが、floatの解説は以上でございます。
【関連】Mr.カラー C46 クリアー (透明)
