IE6-7浮动元素margin-bottom值失效

HTML:

<div class="wrap clear">
    <div id="div1"></div>
</div>
    
<div id="div2"></div>

css:

.clear { zoom:1; }
.clear:after { content:''; display:block; clear:both; }
.wrap { border:1px solid blue;}
#div1 { width:100px; height:100px; background:red; float:left; margin-bottom:10px;}
#div2 { width:200px; height:100px; background:yellow; }

解决方案 父元素给padding-bottom

.clear { zoom:1; }
.clear:after { content:''; display:block; clear:both; }
.wrap { border:1px solid blue; padding-bottom:10px;}
#div1 { width:100px; height:100px; background:red; float:left; }
#div2 { width:200px; height:100px; background:yellow; }