THE HAM MEDIA BLOG

float関連の問題で覚えておくべき5つの対策

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
コーディング
バグ
CSS
float

float関連で覚えておくべきこと

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

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

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

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

■例1ー1(imgにのみfloat:left、下に回り込む)

sample

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

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

■例1ー2(どちらにもfloatとwidthをつける)

sample

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

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

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

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

■例2−1(背景が表示されない)

sample

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストト

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

■例2−2(clearfixをつかう)

sample

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストト

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

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

■例2−3(overflow:hiddenをつかう)

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

sample

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストト

■例2−4(height:○○px;をつかう)

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

sample

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストト

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

■例3−1(IE6だと右側上テキストの左側が3pxずれる)

見出しダミー
ダミーテキスト
ダミーテキスト
ダミーテキスト

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

sample

ちなみに例3−1の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 | コリス

■例3−2(IE6のhasLayoutをtrueに)

見出しダミー
ダミーテキスト
ダミーテキスト
ダミーテキスト

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

4)IE6でmargin幅が倍になる

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

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

■例4−1(marginが倍)

sample

margin-left:50px;を指定

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

sample

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

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

■例4−2(display:inline;にする)

sample

margin-left:50px;を指定

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

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

5)IE6で要素の末尾の文字が複製される

■例5−1(IE6でみると文字が複製されて出現する)

sample

margin-left:50px;を指定

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

◆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でみるとこんな感じ

sample

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

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

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

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

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

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

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

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

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

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/109568808
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

floatされたボックスの末尾テキストが複製されるIE6のバグ
Excerpt: IE6で起きた現象。今回の例は左側にナビゲーション用カラム、右側にメインコンテン...
Weblog: ぶたねずみ.lab
Tracked: 2008-12-19 11:29

dl,dt,ddでデザインを整える方法とか[追記 2009.04.21 12:15]
Excerpt: みなさん、こんにちは!まーしーです。 先週末、また1つ歳をとってしまいました。 誕生日に食べるケーキは大好きです。 今日は最近どうやってやろうかな?と考えてたも...
Weblog: linker journal
Tracked: 2009-04-21 12:14

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。