CSSでfloatを用いたレイアウトの注意点 : CSS

Tweet

Pocket

floatプロパティを用いたCSSレイアウトのまとめ。

»サンプル

基本

float: leftを指定した要素の左マージンが0の場合(float: rightも同様)

各float要素のボックスモデル_※1の横幅の合計値が親要素のwidthプロパティと正確に一致するときはIE6,7・Firefox 3ともにカラム落ちは発生しない_※2。
追記:IE6ではカラム落ちする事態が発生。overflow:hidden;で解決。

float: leftを指定した要素に左マージンが設定されている場合(float: rightも同様)

上述のようにIE7・Firefox3ともにボックスモデルの横幅の合計値が親要素のwidthプロパティと正確に一致するときはカラム落ちは発生しない。
IE6はフロートする最初の要素の左マージンを2倍の値に解釈する。複数個フローとさせる場合は2個目以上の要素は通常どおりの解釈をする。

対策はIE6のみフロートする最初の要素の左マージンのみ半分にする(IE6に対するCSSハック)。

IE6,7はwidthプロパティを設定したフロート要素のmargin-bottomを無視する

フロートする要素の親要素のpadding-bottomで対応。
その他の対応策は下記のページが参考になる。
»正式版完全対応! Internet Explorer 7 CSS攻略法

フロートする要素のボックスモデルの高さに応じて親要素の高さが自動的に拡大しない

親要素にclearfixを設定する。

マージンの相殺

どのブラウザも隣接する要素に対して垂直のマージンは相殺されるが、水平のマージンは相殺されない。

1 ボックスモデル width, padding, border, marginを含めた値
2 子要素のボックスモデルの幅がフロートを設定した要素の幅を超える場合、幅が自動拡大され、カラム落ちすることがある。
また長文の外国語では自動で折り返さないでボックスモデルが拡大することがある。