css清除浮動的幾種辦法：

什麼是CSS清除浮動？

在非IE瀏覽器（如Firefox）下，當容器的高度爲auto，且容器的內容中有浮動（float爲left或right）的元素，在這種狀況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢出，爲了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。

清除浮動能夠經過如下幾種方式實現：

一、使用帶clear屬性的空元素

在浮動元素後使用一個空元素如<div class="clear"></div>，並在CSS中賦予.clear{clear:both;}屬性便可清理浮動。亦可以使用<br class="clear" />或<hr class="clear" />來進行清理。

二、給浮動元素的容器添加overflow:hidden;或overflow:auto;能夠清除浮動，另外爲了兼容IE6觸發hasLayout須要把父元素設置容器寬高或設置 zoom:1。

三、給浮動元素的容器也添加上浮動屬性便可清除內部浮動，可是這樣會使其總體浮動，影響佈局，不推薦使用。

四、使用css的:after僞元素

結合 :after 僞元素（注意這不是僞類，而是僞元素，表明一個元素以後最近的元素）和 IEhack ，能夠完美兼容當前主流的各大瀏覽器，這裏的 IEhack 指的是觸發 hasLayout。

給浮動元素的容器添加一個clearfix的class，而後給這個class添加一個:after/:before僞元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。