浮動ボックスとfloatプロパティ : css

Tweet

Pocket

浮動ボックスを配置する抱含ブロックのwidth,heightプロパティーの値によりレンダリングに様々な影響が出てくる。

width,height共に指定しない

• IE6 ⇒ 浮動ボックスのコンテンツが包含ブロックより大きいと、浮動ボックスのコンテンツがはみ出す。
• Gekko ⇒ 浮動ボックスのコンテンツが包含ブロックより大きいと、浮動ボックス自体が抱含ブロックの外へはみ出す。

widthのみを指定

• IE6 ⇒ 配置された浮動ブロックに合わせて包含ブロックが自動的に伸縮する。
• Gekko ⇒ 抱含ブロックの高さは0になり内部の浮動ボックスがはみ出す。

heightのみを指定

• IE6 ⇒ 抱含ブロックの幅は浮動ボックスを含む最小の幅になり、包含ブロックの高さは指定された高さになる。
• Gekko ⇒ 抱含ブロックの幅は浮動ボックスを含む最小の幅になり、包含ブロックの高さは指定された高さになる。

まとめ

(1)内部に浮動ボックスを持つ包含ブロックを設置したブロックボックスには最低でもheightプロパティーの値を設定しないと意図するレンダリングにならない。

(2)また内部に浮動ボックスを含む抱含ブロックにheightプロパティーを指定しないでborderプロパティーを設定するとボーダーがレンダリングされない。