margin-bottom在IE6和IE7下失效的解决办法

今天在处理页面边距时，又遇到这个问题，float元素在设定margin-bottom时在IE6和IE7下会失效，之前就碰到过，但是用其他的办法调试会就过去了，今天遇到就觉得非得正规整理一下，下面请看实例：

#box{width:600px; background:#E6FECB; border:3px solid #933; overflow:hidden;}
.float_div{float:left; margin:20px; width:100px; height:100px; display:inline; background-color:#CCC;}
</style>
<div id="box">
<div class="float_div"></div>
<div class="float_div"></div>
<div class="float_div"></div>
</div>

其在IE6和IE7下显示效果为：



margin:20px; 只有margin-bottom失效了。

解决办法：只要在浮动的最后一个元素后面加上“<div class="clear"></div>”，如下：

<style type="text/css">
#box{width:600px; background:#E6FECB; border:3px solid #933; overflow:hidden;}
.float_div{float:left; margin:20px; width:100px; height:100px; display:inline; background-color:#CCC;}
.clear{clear:both;}
</style>
<div id="box">
<div class="float_div"></div>
<div class="float_div"></div>
<div class="float_div"></div>
<div class="clear"></div>
</div>

作为网页开发者肯定是经常处理这种情况的，也常在耳边听到清除浮动，上面的方法就是清除浮动，了解了这里产生的原因及解决办法才能真正掌握，不然像以前一样使用别的方法避开此问题，那下次还会遇到，抓住根本就好多了，float元素设定margin-bottom时在IE6和IE7下会失效，清除浮动即可解决，这也是用的比较多的办法！

还有个简单点的解决方法：

IE6/7下margin-bottom无效一般出现在容器里某元素设置后在父容器内无效，这个时候只需要在父容器中加入以下两句css，基本上所有的浏览器都兼容了：

overflow:hidden;zoom:100%;

这个方法不用添加额外的标签，也是很好的解决办法！