レイアウトには必須のfloatですが、使い方を間違えると思いもよらないレイアウトになることがある。
Tech de Goさんのまとめを参考にメモ
1.widthの解釈
有名なwidthの解釈の違いです。レイアウト上は致命的です。「widthのある属性にpaddingやborderを使わない」ということにつきます。
「floatにはwidthを指定する」「widthとpadding, border」を使わないを合わせると、
floatした要素にはpadding, borderを使わない。
になります。paddingしたい場合はHTML構造で中にもう一つコンテナを作ってそこでpaddingやborderを指定するようにします。そうすればレイアウト上の苦労は少なくなります。
2.”have layout”問題
“have layout”プロパティを持つ要素はサイズや位置がコントロールされます。持ってない要素では親要素に従ってレイアウトされます。
“have layout”になるのは以下のような場合です。
1. body, table, tr, td, img, hr, input, select, textarea, button, iframe, embed, object, applet, marqueeの各要素
2. position: absolute; が指定された要素
3. float: が指定された要
4. display: inline-block; が指定された要素
5. width, height が指定された要素
“have layout”にはいろんな問題があります。以下は一部です。
テキストが回り込まずにボックスになる。
本来（フロートしてない）テキストに関しては、フロートしたボックスの周りに回り込むべきですが、haslayoutの場合、ボックス型になってしまいます。これを避けるには、haslayoutにならないようにするしかないようです。
widthを指定していても、幅が勝手に広がる。
widthを指定しているボックスは大きくしないであふれたテキストは次行に送って欲しいところですが、haslayoutの場合、はみ出したテキスト分だけwidthを無視して幅を広げてしまいます。これも、has layoutにならないようにするか、widthのあるボックスの内側にボックスを作ってそこにテキストを流すことで回避できます。
3. margin double 問題
私はこのマージンが二倍になってしまう問題に良く出くわします。ただ、見てすぐわかるのと、解決方法が簡単なので、覚えるだけです。フロートしている要素にdisplay:inline;を足すだけです。他のブラウザには影響しません。
4. その他のバグ
peek-a-boo バグ
フロートした要素の後の、フロートしていない要素が、消えてしまう現象で、なぜかページをリロードすると出現します。この現象の発生条件は、①フロート要素の後にフロートしていない要素があり、②その後にclearした要素があり、それがフロートした要素に接触していて、③これらを内包する親ボックス要素にwidthやheightが設定されいない、かつ背景の色かイメージが設定されている。です。
解決するにはフロートした要素にposition: relative;を付け加えるだけです。
結局FirefoxかOperaでレイアウトを確認して、正しくレイアウトされてから、IE6で確認し、おかしかったら同じ現象のバグを検索するしかないでしょう。
float関連css
投稿日：2007.05.22
