1. TOP >
  2. 運営者紹介 >
  3. 運営者ブログ >
  4. floatに関するバグ解決法 ~背景が消えてしまう場合~

運営者ブログ

floatに関するバグ解決法 ~背景が消えてしまう場合~

背景色、または背景画像を入れているボックスの中でfloat指定をすると、背景が消えてしまうことがあります。IE6などではウィンドウを上下にスクロールさせると消えたり表示されたり、文字が消えてしまったりと多くのバグが確認されています。

これは背景を入れているボックスにwidth指定を加えることで解決します。

CSS

div {
 width:300px;
 background:#ff0000;
}

また、clear指定にも解決法があります。
brタグに回り込み解除を埋め込む方法をよく目にしますが、背景が消えてしまうことが多々あります。そこで以下のような指定で回り込みを解除させるとある程度のバグを回避できます。

HTML

<div style="clear:both;"></div>

空要素になってしまうものの、レイアウトが崩れてしまうよりはよいでしょう。また、スペーサー(透過画像)で解除させても同様の効果があります。

HTML

<img src="ファイル名" width="幅" height="1" style="clear:both;">

このようにいくつか解決法があるわけですが、width指定を加えて解決するのがベストでしょう。