THE HAM MEDIA BLOG

CSSのfloat関係って、基本的に覚えておくべき事ですが、
動作がいまいちわかり辛かったり、バグが多かったりと、
float一つとっても覚えておくべきことって多いと思います。

なのでfloat関連の問題で覚えておくべき解決方法や
回避方法のことなどについてをまとめてみた。

１）floatしたボックスの下にコンテンツがこないようにする

写真の横に文字をもってきて、その文字が多ければ
写真の下にも文字をもってくる・・・というような場合は、
単純にimgにfloatをつけるだけでできるのですが、
コンテンツが下に来ないようにしたい場合はどうしたらいいか。

■例１ー１（imgにのみfloat:left、下に回り込む）

これの解決方法は簡単で、現状imgにしかfloatがついていないので、
テキスト側にもfloatをつけて左右どちらにもwidthをつければ
テキストが画像下にこなくなる。

■例１ー２（どちらにもfloatとwidthをつける）

右のテキストが左の画像の下に回り込まないようになる。

２）背景やボーダーが表示されなかったり低くなる

floatをつけると、その周りを囲っているボーダーや背景が
高さをとれなくなって、中身を囲ってくれなくなる。

■例２−１（背景が表示されない）

これは有名なclearfixという技を使うことで高さを確保することができる。

■例２−２（clearfixをつかう）

高さを確保するには下記のCSSを背景がある部分に適応させるだけ。

.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

■例２−３（overflow:hiddenをつかう）

これは背景部分でoverflow:hidden;をつけるだけ。
これだけでうまくいかない場合は、zoom:1;をつけたり、
height:1%;などをつけて、hasLayoutというのをtrueにしたら
だいたいのものが適応される。

■例２−４（height:○○px;をつかう）

内容に変化があっても高さが決まっているような場合は、
heightで高さを指定して固定するだけで背景の高さがつく。

３）IE6でテキストの端が3pxだけずれる

■例３−１（IE6だと右側上テキストの左側が3pxずれる）

↓上のサンプルをIEで表示させるとこんな感じになる。

ちなみに例３−１のHTMLとCSSはこれ

◆HTML

<dl>
  <dt>見出しダミー</dt>
  <dd>
    ダミーテキスト<br />
    ダミーテキスト<br />
    ダミーテキスト
  </dd>
</dl>

◆CSS

dt{
  float:left;
  width:100px;
  background-color:#ccc;
}

dd{
  margin-left:100px;
  background-color:#ccc;
}

この現象が起こるのは、hasLayoutがfalseになっているから。
なのでそれをtrueにするような設定をいれればよい。

hasLayout関連はコリスさんのところでまとまっていたので、
そこを参照してみてください。

参照：IEでのCSSのバグを回避するhasLayout | コリス

■例３−２（IE6のhasLayoutをtrueに）

今回はheight:1%;を指定してみた。

４）IE6でmargin幅が倍になる

これはかなり有名なバグで、
初心者とかがハマってしまいがちな問題。

今回のエントリーの最初の画像にした問題のことで、
floatした方向と同じ向きにmarginを指定すると
そのmarginの値が倍になって適応されるというバグである。

■例４−１（marginが倍）

↓IE6でみるとこうなっている

margin-left:50px;なのに、倍の100px分左に余白ができてしまっている。

これの回避方法は、floatをかけた部分にdisplay:inlline;を指定しておくこと。
display:inline;をつけることでmarginの値が倍にならなくなる。

■例４−２（display:inline;にする）

これで倍にならなくなった。

この他にもmarginを使わずにpaddingにすることでもこの問題を回避できる。
好きな方でこの問題を回避するのがいいでしょう。

５）IE6で要素の末尾の文字が複製される

■例５−１（IE6でみると文字が複製されて出現する）

上記のサンプルスクリプトはこれ
例４とテキストが同じ点は気にせずに（汗）

◆HTML

<div style="width:300px;">
<p style="float:left;width:100px;display:inline;">
<img src=".gif" alt="sample" width="100" height="100" /></p>
<!--コメント-->
<!--コメント-->
<p style="float:left;width:200px;">margin-left:50px;を指定</p>
</div>

外枠のdivのwidthが300pxで、内容の合計widthも300px。
さらに内容にコメントが入っている。

内容がfloatされていて、コメントが入っている時、
その親要素のwidthと内容の合計widthとの差が3px以内の時に、
テキストの文字が複製して出現してしまう。

↓IE6でみるとこんな感じ

このバグの解決方法は、親要素の幅を3px広げて、
マイナスマージンで-3px元に戻すように指定すると修正できる。

もしくはコメントを削除するだけでもこの問題は解決する。
floatしているボックスの間にコメントを入れないようにするのが
この問題を未然に防いて回避する最善の方法かなと思います。

float関連の問題の防止策まとめ

以上５つとその修正方法を書いてみた。
これらをまとめて、コーディング段階で未然に防ぐには
下記のことを習慣づけてコーディングするといいと思います。

• ○ floatを指定した時は、一緒にdisplay:inline;、widthを指定しておく。
• ○ コメントはdivの終了タグ前に一つ入れるだけにする。
• ○ 背景がでない場合はclearfixのCSSを使うか、
  　　overflow:hiddenとhasLayoutをtrueにする指定をしておく。
• ○ float周りで他に問題が起きたらとりあえずwidthをつけてみる

以上のことを気をつけて
コーディングの段階でいれたりする習慣をつけたほうがいいでしょう。

上記の回避方法を使うのが嫌な人は、それぞれ独自の回避方法でもいいと思います。
display:inline;の指定を好まない人もいるので、
あとは各自の好みや制作の際の仕様に従うほうがいいでしょう。

この他にもバグや問題もあるとは思いますが、
今回のは特に問題となりやすいようなことを挙げてみました。
２とか４は、はまってしまう人も多いのではないでしょうか？

２でのボーダー関連とか、知らないとかなり困惑してしまいますからね。
あらかじめ起こりうる問題を覚えておいて、
回避しつつ作った方が効率アップだと思います。