floatした領域に左右のマージンを付けると、指定した値の2倍のmarginが発生する。
例
対象ブラウザ
Windows
Internet Explorer5
Internet Explorer6
回避方法
floatしている領域にdisplay:inlineを付ける。
また仕様に準拠したブラウザに、display:inlineを付けると影響はないのかという点ですが、
CSS2の仕様では「floatを指定した要素はdisplayの指定を無視する」というのがありますので、
FirefoxやOperaではdisplayの指定を無視します。
注意点としてはdisplay:inlineの指定をfloatより前に書くことが必要らしいが、これはデマかも[要確認]
(下の例ではstyle属性ですが、floatのほうが先です)
marginではなくpaddingを使用するという方法もあります。
floatの親要素に対してpaddingを指定すると回避できますが、WindowsIE5,6の場合、ボックスモデルの解釈の違いがありますので注意してください。
[参考記事] ボックスの幅や高さの解釈が違う
display:inlineでの回避例
ただしマージンについては左右のみのバグであって、上下は仕様どおりです。
関連プロパティ
float左または右に寄せて配置する
marginマージンに関する指定をまとめて行う
margin-left左マージンを指定する
margin-right右マージンを指定する
主要ブラウザに非対応