Bug：IE6浮动双边距

发生场合：当给父元素内第一个浮动元素设置margin-left（元素float:left）或margin-right（元素float:right）时margin加倍。

 

test01:左浮动元素

<ul class="box01 clearfix">
    <li>第1个元素</li>
    <li>第2个元素</li>
    <li>第3个元素</li>
    <li>第4个元素</li>
</ul>

.clearfix:after{content:'.'; display: block; height: 0; clear:both; visibility: hidden;}
.clearfix{zoom:1;}
.box01{border:1px solid #f00; list-style: none; padding: 0;}
.box01 li{width: 100px; height: 100px; border:1px solid blue; float: left; margin-left: 10px;}

效果：第一个浮动元素margin-left加倍

    

 

 

test02:给浮动元素加上display:inline;（解决方法一）

.clearfix:after{content:'.'; display: block; height: 0; clear:both; visibility: hidden;}
.clearfix{zoom:1;}
.box01{border:1px solid #f00; list-style: none; padding: 0;}
.box01 li{width: 100px; height: 100px; border:1px solid blue; float: left; margin-left: 10px; display: inline;/*解决ie6双边距*/}

效果：

结论：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。

　　   只有第一个元素存在双边距的原因：浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而后面对象是相对第一个对象的。

　　　display:inline可以解决这个双边距bug的原因：

　　　　1、inline元素或inline-block元素是不存在双边距问题。

　　　　2、float:left等浮动属性可以让inline元素拥有 haslayout，会让inline元素表现得跟inline-block元素的特性一样（即支持高宽，垂直margin和padding等）。