CSSでfloatを用いたレイアウトの注意点 : CSS
floatを用いたレイアウトのまとめ。
»サンプル
基本
float:leftを指定した要素の左マージンが0の場合(float:rightも同様)
各float要素のボックスモデル※1の横幅の合計値が親要素のwidthプロパティと正確に一致すれば、IE6,7,Firefox3ともにカラム落ちは発生しない※2。
追記:IE6ではカラム落ちする事態が発生。overflow:hidden;で解決。
float:leftを指定した要素に左マージンが設定されている場合(float:rightも同様)
IE7,Firefox3ともに上述のようにボックスモデルの横幅の合計値が親要素のwidthプロパティと正確に一致すればカラム落ちは発生しない。
IE6ではフロートする最初の要素の左マージンが2倍に解釈される。複数個フローとさせる場合は2個目以上の要素は通常どおりの解釈。
CSSハックを使ってIE6のみフロートする最初の要素の左マージンのみ半分にする(IE,IE6に対するCSSハック)
IE6,7はフロートする要素にwidthプロパティを設定した場合、margin-bottomが無視される
フロートする要素の親要素のpadding-bottomで対応。
その他の対応策は下記のページが参考になる。
»正式版完全対応! Internet Explorer 7 CSS攻略法
フロートする要素のボックスモデルの高さに応じて、親要素の高さが自動的に拡大しない(IE7,Firefox3 仕様では拡大するのが正しい)親要素にclearfixを設定する。
マージンの相殺どのブラウザも隣接する要素に対して垂直のマージンは相殺されるが、水平のマージンは相殺されない。
※1 ボックスモデル width, padding, border, marginを含めた値
※2 子要素のボックスモデルの幅がフロートを設定した要素の幅を超える場合、幅が自動拡大され、カラム落ちすることがある。
また長文の外国語では自動で折り返さないでボックスモデルが拡大することがある。
コメントはまだありません。
コメントの投稿
改行と段落タグは自動で挿入されます。メールアドレスは表示されません。
利用可能な HTML タグ :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite="">
<cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>