關於CSS中清除浮動的方法

在使用CSS樣式時會常常使用到浮動（float），這時若是沒有清除浮動就會形成不少怪異的現象，所以對父級元素清除浮動是必需要作的，這樣也是書寫CSS的一個良好習慣。

目前經常使用的方法大體有三種。

（1）使用空標籤清除浮動

這是目前最經常使用的一種清除浮動的方法。空標籤能夠是div標籤，也能夠是P標籤。其實理論上能夠是任何標籤。這種方法是在須要清除浮動的父級元素內部的最後添加一個清除浮動的空標籤，其CSS代碼：clear:both。此方法簡潔明瞭，方便實用，但其弊端也很明顯，就是增長了無心義的結構元素。此外，有一種與此類似的方法，<br clear="all"/>也能夠實現一樣的效果。

（2）使用after僞對象清除浮動

各瀏覽器均支持after僞對象，因此after應該是適用的，不存在兼容問題。其CSS代碼：#layout:after{ display:block; clear:both; content:""; visibility:hidden; height:0;}。使用中需注意：一、該方法中必須爲須要清除浮動元素的僞對象設置height:0，不然該元素會比實際高出若干像素；二、content屬性是必須的，但其值能夠爲空。此方法實用有效，且不用添加無心義的標籤，但CSS代碼較複雜，不夠簡潔明瞭。

（3）使用overflow屬性

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

這三種清除浮動的方法在實際應用中均實用有效，至於使用哪種那就是仁者見仁智者見智了，本人仍是習慣使用第一種方法，簡單快捷無壓力，並且那幾個清除浮動的標籤其實也無傷大雅！