今天在面试的时候，面试官提的一个IE兼容的问题：IE6、7中使用CSS样式float会出现什么问题？
我第一个想到的就是浮动BUG，但是处理的方法忘记了。。。因为平常都是抛弃了IE，这下让我情何以堪，改怎么回答呢？虽然模糊的回答了下，但感觉不如意，回来特地研究了下！
css
*{
margin:0;
}
div {
width:200px;
height:200px;
border:1px solid #ff0000;
text-align:center;
margin:10px;
}
.div{
float:left;
}
.div3{
border:solid 1px blue;
}
html
<body>
<div class="div">div 1</div>
<div class="div">div 2</div>
<div class="div3">div 3</div>
</body>
因为win10上没有IE6，使用的是IE7，
IE7效果
以上两张图可以看出，在IE7中，三个div 看起来都是被浮动了一样，展示在一排上，但是div3我们并不需要进行浮动啊，所以这里出现了BUG。
在google浏览器中，可以看见div3被div1给遮住了，因为div1和div2在浮动之后，就脱离了文档流，它本应该占的位子就没有了，div3就挤了上去，故而我们看见，div1把div3给遮住了。
解决的方法，就是给不需要浮动的同级元素清除一下浮动：
.div3{
clear:both;
}
更多的float问题请看： http://www.ruanyifeng.com/blog/2009/04/float_clearing.html
转载请注明：Falost的小窝 » IE BUG之css:float
如果你觉得这篇文章不错或者对你有帮助，想请我喝一杯咖啡，可以打赏
