什么是浮動？
原理： 在css中使用float:left和float:right,使元素脫離文檔流。同時顯示為類似display:inline-block的形式（可以定義寬高，但是又不會換行）。最大好處是相比於之前的table布局的，更具有靈活性。
不清除浮動會產生什么后果？
比如 我想要如下這樣的布局效果:
HTML代碼可以如下寫：
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
CSS代碼如下：
.div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:40px;background:#DDD} .right{float:left;width:30%;display:inline;margin-left:12px;height:40px;background:#DDD}
但是由於有浮動產生，我們沒有清除浮動，所以會產生如下后果：如下圖所示：
也就是說 沒有清除浮動 會使我們的布局變亂。
清除浮動的方法有哪些？
1.父級元素定高度。
還是上面的HTML代碼：
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
CSS代碼如下：
.div1{background:#000080;border:1px solid red;height:40px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:40px;background:#DDD} .right{float:left;width:30%;display:inline;margin-left:12px;height:40px;background:#DDD}
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單，代碼少，容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題.
建議：不推薦使用，只建議高度固定的布局時使用
2.添加額外的標簽。
HTML代碼如下：
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clearfloat"></div> </div> <div class="div2">div2</div>
CSS代碼如下：
.div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:40px;background:#DDD} .right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD} .clearfloat{clear:both}
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，代碼語義化變差。
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
3.父元素設置overflow:hidden
通過設置父元素overflow值設置為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1；
Zoom的使用方法：
zoom : normal | number normal :
默認值。使用對象的實際尺寸 number :
百分數 | 無符號浮點實數。浮點實數值為1.0或百分數為100%時相當於此屬性的 normal 值 用白話講解就是zoom:后面的數字即放大的倍數，可以是數值，也可以是百分比。如：zoom:1，zoom:120%。 而這個屬性只要在IE中才起作用，所以很少用到它的實際用途，而最經常用到作用是清除浮動等。
HTML代碼如下：
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
CSS可以寫成如下代碼：
.div1{background:#000080;border:1px solid red;overflow:hidden;_zoom:1} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:40px;background:#DDD} .right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}
優點：不存在結構和語義化問題，代碼量極少。
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素；
4.父元素設置 overflow：auto 屬性
同樣IE6需要觸發hasLayout，演示和3差不多
優點：不存在結構和語義化問題，代碼量極少
缺點：多個嵌套后，firefox某些情況會造成內容全選；IE中 mouseover 造成寬度改變時會出現最外層模塊有滾動條等，firefox早期版本會無故產生focus等。
5. 父元素也設置浮動。
HTML代碼如下：
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
CSS代碼如下：
.div1{background:#000080;border:1px solid red;width:100%;float:left} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:40px;background:#DDD} .right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}
優點：不存在結構和語義化問題，代碼量極少。
缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用。
6.父元素設置display:table
HTML代碼如下：
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
CSS代碼如下：
.div1{background:#000080;border:1px solid red;width:100%;display:table;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:40px;background:#DDD} .right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}
原理：將div屬性變成表格
優點：結構語義化完全正確，代碼量極少
缺點：盒模型屬性已經改變，由此造成的一系列問題，不推薦使用。
建議：不推薦使用，只作了解。
7.使用:after 偽元素
HTML代碼如下：
<div class="div1 clearfloat"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
CSS代碼如下：
.div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:left;width:30%;margin-left:12px;display:inline;height:80px;background:#DDD} .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}
由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
優點：結構和語義化完全正確
缺點：復用方式不當會造成代碼量增加。
總之：都有優點和缺點 具體的情況具體分析。我目前一般都用overflow:hidden來解決浮動 到目前為止還沒有碰到什么問題。