CSS清楚浮动方法

1.加高

直接给父级元素加高度
问题：扩展性不好

2.给父级元素也加浮动

问题：如果父级也有父级，就还要加浮动。margin左右自动失效。
<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; float:left; } .div{ width:200px; height:200px; background:red; float:left; }
</style>
<div class='box'>
<div class='div'></div>
</div>

3.给父级元素加inline-block

问题：margin左右自动失效
<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; display:inline-block; } .div{ width:200px; height:200px; background:red; float:left }
</style>
<div class='box'>
<div class='div'></div>
</div>

4.给父级元素加inline-block

问题：IE6最小高度19px；解决：需在.clear加font-size：0；（解决后IE6下还有2px偏差)
<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; } .div{ width:200px; height:200px; background:red; float:left } .clear{ height:30px; background:blue; clear:both; }
</style>
<div class='box'>
<div class='div'></div>
<div class='clear'></div>
</div>

5.
清浮动

问题：不符合工作中：结构、样式、行为，三者分离的要求
<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; } .div{ width:200px; height:200px; background:red; float:left }
</style>
<div class='box'>
<div class='div'></div>
<br clear='all'> <--等同于css中的clear:both;-->
</div>

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

<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; } .div{ width:200px; height:200px; background:red; float:left } .clear:after{ /*IE6\7不支持*/ content:''; display:block; clear:both; } .clear{ zoom:1; }
</style>
<div class='box clear'>
<div class='div'></div>
</div>
在IE6\7下浮动元素的父级有宽度就不用清浮动
zoom缩放，出发IE下haslayout，使元素根据自身内容计算宽高。FF不支持。

7.overflow:hidder清浮动方法

问题：需要配合宽度或者zoom兼容IE6\7
<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; overflow:hidden; } .div{ width:200px; height:200px; background:red; float:left }
</style>
<div class='box'>
<div class='div'></div>
</div>