由于浮動元素不占用原文檔流的位置，所以它會對后面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。準確地說，并不是清除浮動，而是**清除浮動后造成的影響** [TOC] # 1. 清除浮動的本質 清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題，如果子元素不浮動，則會撐開父盒子。  <br/> # 2. 清除浮動的方法 * **clear屬性（1）** 在CSS中，clear屬性用于清除浮動，基本語法如下： ```css3 選擇器{clear:屬性值;} ? clear 清除 ``` | 屬性值 | 描述 | | --- | --- | | left | 不允許左側有浮動元素（清除左側浮動的影響） | | right | 不允許右側有浮動元素（清除右側浮動的影響） | | both | 同時清除左右兩側浮動的影響 | * **額外標簽法（2）** 這是W3C推薦的做法，通過在浮動元素末尾添加一個空的標簽例如 `<div style=”clear:both”></div>`，或則其他標簽br等亦可。 優點： 通俗易懂，書寫方便 缺點： 添加許多無意義的標簽，結構化較差。 我只能說，w3c你推薦的方法我不接受，你不值得擁有。 * **父級添加overflow屬性方法（3）** 可以通過觸發BFC的方式，可以實現清除浮動效果。 ```css 可以給父級添加： overflow為 hidden|auto|scroll 都可以實現。 ``` 優點： 代碼簡潔 缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。 * **使用after偽元素清除浮動（4）** `:after`方式為空元素的升級版，好處是不用單獨加標簽了 使用方法： ```css3 .clearfix:after { ?content: ""; display: block; height: 0; clear: both; visibility: hidden; } ? /* 注意： content:"" 盡量不帶點 */ .clearfix {*zoom: 1;} ? /* IE6、7 專有 */ ``` 優點： 符合閉合浮動思想，結構語義化正確 缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。 代表網站： 百度、淘寶網、網易等  * **使用before和after雙偽元素清除浮動（5）** 使用方法： ```css3 .clearfix:before, .clearfix:after { ?content:""; ?display:table; ?/* 這句話可以出發BFC BFC可以清除浮動,BFC我們后面講 */ } .clearfix:after { clear:both; } .clearfix { *zoom:1; } ``` 優點： 代碼更簡潔 缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。 代表網站： 小米、騰訊等