案例:
html:
<div class="div1"> <div class="div2"></div> <br class="clear"/> </div>
css:
.div1{ border: 5px solid green; } .div2{ background: red; width: 200px; height: 200px; float: left; } .clear{clear:both;}
问题：不符合工作中：结构、样式、行为，三者分离的要求(多加了元素)。
案例：
html:
<div class="div1"> <div class="div2"></div> </div>
css:
.div1{ border: 5px solid green; zoom:1; } .div1:after{ content: ""; clear:both; display: block; } .div2{ background: red; width: 200px; height: 200px; float: left; }
注意：clear属性在块元素下才有效，所以需要设置display:block。由于ie6、7下不兼容after伪类，所以加zoom触发 IE下 haslayout，使元素根据自身内容计算宽高。
3.overflow:auto | hidden 清浮动方法
案例：
html:
<div class="div1"> <div class="div2"></div> </div>
css:
.div1{ border: 5px solid green; overflow: auto; width: 100%; } .div2{ background: red; width: 200px; height: 200px; float: left; }
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
原文：http://www.cnblogs.com/erduyang/p/4713659.html