ie浏览器浮动出现双边距问题

在我们的页面设计中，经常用到float这里属性，在IE中的浮动比较特别，会出现双边距的情况，下面来讨论下这个问题

1、什么情况会出现双边距

IE浏览器的浮动，如果浮动的元素的浮动方向设置的外边距，则浮动后的外边距是浮动前的两倍。如下图：

div{
  float:left;
  margin-left:10px
}

代码执行后看到的margin-left其实是20px

如果浮动的方向和设置的外边距方向不一样，则不会出现这个问题，如向左浮动，设置的是margin-right，则不会出现双边距的情况。

同一行多个浮动的元素，如果全都满足出现双边的条件，则只有第一个元素会出现双边距，其他的元素不会。

2、解决的办法

给浮动的元素添加display: inline;