float された要素と見出しなどを並べると、次図のように通常は見出しなどの領域は float された要素の下に食い込んだように表示されます。

• 食い込んだように表示される demo

しかし、このように食い込んでしまう表示は意図しないことがほとんどです。次図のように float された要素は避けるように表示したい場合も多いでしょう。

これを実現するためには、見出しなどの要素が次の 3 つを満たす状態にします。

• display : block;
• overflow : hidden;
• hasLayout : true; (IE 用)

e.g.

h3{
  display:block;
  overflow:hidden;
  zoom:1;
}

• 食い込む見出しの対策をした demo

ただし、テキストが自動で折り返さない場合、崩れてしまいます。(IE とその他の Web ブラウザーで表示が違います。また、IE の場合には word-break:break-all; を指定すれば崩れなくなります)

• 折り返さず崩れてしまう場合の demo

また、この手法を応用することで簡易的に、float を使用した時でも回り込まないテキスト領域を実現することもできます。

• 回り込まないテキスト領域の demo (手を加える前)
• 回り込まないテキスト領域の demo (手を加えた後)

これに関しては過去に紹介した別の方法 : 画像の下にテキストが回りこまないレイアウトで実現することもできます。

トラックバックURI

http://www.yomotsu.net/lab/css/layout_float-impervious/trackback

実験室に戻る

Web サイト内検索