出現條件：
1、沒有設置display:inline的塊元素
2、浮動元素
3、設置了水平外邊距（浮動的方向和水平外邊距設置的方向一致）
4、元素與父容器之間
備註：因爲浮動都有其相對應的對象，只有相對於其父容器的浮動纔會出現這樣的問題。第一個元素是相對父容器的，而第二個是相對第一個兄弟元素的，所以第二個浮動元素不會出現雙倍水平外邊距問題。而且只有設置水平外邊距的值纔會出現雙倍外邊距，垂直外邊距沒有關係。
解決辦法：給浮動塊框設置display:inline解決問題
下面是測試代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE6 雙倍水平外邊距</title>
<style>
*{
margin:0;
padding:0;
}
.testbox{
background:#CCC;
width:100px;
height:100px;
margin:10px 0 0 10px;
float:left;
display:inline;/*去掉display:inline在IE6下看看效果*/
}
</style>
</head>
<body>
<div class="testbox">IE6浮動雙倍外邊距</div><div class="testbox">IE6浮動雙倍外邊距</div>
</body>
</html>
原因分析：這個現象僅當塊框設置了浮動纔會出現，行內框浮動不會出現此問題。因爲行內框默認display:inline，給其float後自動就具有塊框特性，所以如果是span之類的行內框，浮動後是不需要再單獨設置display:inline就可以自動消除雙倍水平外邊距。
下面是測試代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE6 雙倍水平外邊距</title>
<style>
*{
margin:0;
padding:0;
}
.testbox{
background:#CCC;
width:100px;
height:100px;
float:left;
margin:10px 0 0 10px;
}
</style>
</head>
<body>
<span class="testbox">IE6浮動雙倍外邊距</span><span class="testbox">IE6浮動雙倍外邊距</span>
</body>
</html>
總結一下：
如果默認的是塊元素例如div之類的，在設置 float 後同時要置display:inline來解決IE6的雙倍水平外邊距；
如果默認是內聯元素例如span之類的，那麼浮動後是沒有關係的，因其自身居右display:inline，所以不需要再重複添加該屬性。