Home > All | CSS | WordPress > 【css】親ボックスに背景を適応してfloatした時、firefoxで消える際の対処法

【css】親ボックスに背景を適応してfloatした時、firefoxで消える際の対処法

  1. 親ボックスに高さを指定する
  2. clearを使う※一般的な方法
  3. overflow:autoを使う※簡単な方法

【floatの仕組み】

floatは『回り込み』と解説される事が多い為、ブロックレベル要素を回り込ませる為のプロパティと思われがちですが実は違います。
floatはブロックレベル要素を『浮かせる』為のプロパティになります。
つまりfloat:leftはブロックレベル要素を浮かした上で親要素に対して左に寄せて配置することを意味します。

floatを適応された子ボックスは『浮く』ので、親ボックスは子ボックスを内包することにより確保していた高さを失うことになります。


つまり、IEはfloat処理が正しく行われない為、親ボックスの高さが失われないというバグです。

(参考にさせていただいたサイト)
http://blog.webcreativepark.net/2007/01/08-005218.html

Related Posts B

  1. 【対処方法】管理画面が真っ白に!!
  2. 【css】ブロックレベル要素の段組レイアウトの底辺の高さを揃える
  3. 【強制的にパスワード変更】インストール時に設定したパスワードで入室できない
  4. 【plug-ins】WordPressに絵文字を追加しました

Comments（コメント欄）:0

Comment Form（コメントフォーム）
Remember personal info（入力情報を記憶させる）
:nod: :ok: :skip: :run: :love: :banzai: :plain: :train: :drive: :bike: :heart: :woolly-minded: :decline: :glistening: :no2: :bat: :maru: :batsu: :tissue: :bath: :home: :plant: :sakura: more »

Trackbacks:0

Trackback URL for this entry
http://www.kanamel.com/2009/11/13/%e3%80%90css%e3%80%91%e8%a6%aa%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ab%e8%83%8c%e6%99%af%e3%82%92%e9%81%a9%e5%bf%9c%e3%81%97%e3%81%a6float%e3%81%97%e3%81%9f%e6%99%82%e3%80%81firefox%e3%81%a7/trackback/
Listed below are links to weblogs that reference
【css】親ボックスに背景を適応してfloatした時、firefoxで消える際の対処法 from at whim at any time...

Home > All | CSS | WordPress > 【css】親ボックスに背景を適応してfloatした時、firefoxで消える際の対処法

Calendar
« 2009 年 11月 »
M T W T F S S
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
アーカイブ
カテゴリー
ページ
Tag Cloud
ブックマーク + RSS
twwets
あわせて読みたい
あわせて読みたいブログパーツ
RSS at whim at any time…

Return to page top

Switch to our mobile site