清除float浮動的幾種方法

float 屬性定義元素在哪一個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。

float主要流行與頁面佈局，而後沒有使用後沒有清除浮動，就會後患無窮，下面是清除float的幾種方法。

第一種方法：使用空標籤清除浮動

<ul >

<li>AAA</li>

<li>BBB</li>

<li>CCC</li>

<br style="clear:both"> 

</ul>

第二種方法：使用overflow屬性

此方法有效地解決了經過空標籤元素清除浮動而不得不增長無心代碼的弊端。使用該方法是隻需在須要清除浮動的元素中定義CSS屬性：overflow:auto，便可!overflow:auto;是讓高度自適應，zoom:1;是爲了兼容IE6，也能夠用height:1%;的方式來解決，注意，zoom不符合W3C標準。overflow:hidden也能夠實現。

<ul style="overflow:auto;zoom:1>

<li>AAA</li>

<li>BBB</li>

<li>CCC</li>

</ul>

第三種方法：使用after僞對象清除浮動

after僞對象非IE瀏覽器支持，因此並不影響到IE/WIN瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。

1、該方法中必須爲須要清除浮動元素的僞對象中設置height:0，不然該元素會比實際高出若干像素；

2、content屬性是必須的，但其值能夠爲空，藍色理想討論該方法的時候content屬性的值設爲"."，

<style type="text/css">
 .listinfo:after{display:block;clear:both;content:"";  

visibility:hidden;height:0;} c< class="listinfo">/

<li>AAA</li>

<li>BBB</li>

<li>CCC</li>

</ul>