清除浮动的几种方式

1.br元素结合clear属性清浮动

案例:

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;}

问题：不符合工作中：结构、样式、行为，三者分离的要求(多加了元素)。

2.after伪类 清浮动方法（现在主流方法）

案例：

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；