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>
