W-0044 float の重大な注意点
- 2001/6/14
- 8/22
- 8/23
※ここに掲載している情報は間違っている可能性が非常に高いので、信用してはならない。これらの情報を信用してアナタが不利益を被ったとしても、それは全てアナタの責任である。
気づいていない人も多いようですが、 CSS 2 の float は、 img など width 属性で元々横幅が指定されているもの（これを内在幅という）以外は width プロパティで auto 以外の具体的な幅を明示しなければなりません。
width 無指定で table や ul を float にした場合、 Windows の IE や Mozilla は 必要最小限の横幅の float としてそれなりに処理しますが、 MacIE は width が無指定の場合横幅100%の float として処理します。さらに言うと、仕様に厳密に従えばこの場合は横幅0の float として処理するのが正しいということで、特定のブラウザでの処理を基準に考えて「 auto ＝最小の幅」「 auto ＝最大の幅」と短絡的に認識するのは大きな間違いです。
メニューやコンテンツリストなどを float にする場合は、無精せずに、きちんと横幅を指定しておきましょう。
尚、 CSS には「自動で必要最小限の幅にする」という効果を明示的に指定するプロパティはありません（ display: table でテーブルレイアウトを再現すれば、そういう処理も可能ですが）。