CSS清除浮動各種方法

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

清除浮動方法:

方法一：使用帶clear屬性的空元素或者給浮動元素後面的元素新增clear屬性。

在浮動元素後使用乙個空元素如

，並在css中賦予.clear屬性即可清理浮動。亦可使用

或來進行清理。

優點：簡單，**少，瀏覽器相容性好。

缺點：需要新增大量無語義的html元素，**不夠優雅，後期不容易維護。

方法二：使用css的overflow屬性

給浮動元素的容器新增overflow:hidden;或overflow:auto;可以清除浮動，另外在 ie6 中還需要觸發 haslayout ，例如為父元素設定容器寬高或設定 zoom:1。

在新增overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

方法三：給浮動的元素的容器新增浮動

給浮動元素的容器也新增上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用。

方法四：使用css的:after偽元素結合 :after 偽元素（注意這不是偽類，而是偽元素，代表乙個元素之後最近的元素）和 iehack ，可以完美相容當前主流的各大瀏覽器，這裡的 iehack 指的是觸發 haslayout。

給浮動元素的容器新增乙個clearfix的class，然後給這個class新增乙個:after偽元素實現元素末尾新增乙個看不見的塊元素（block element）清理浮動。

通過css偽元素在容器的內部元素最後新增了乙個看不見的空格"020"或點"."，並且賦予clear屬性來清除浮動。需要注意的是為了ie6和ie7瀏覽器，要給clearfix這個class新增一條zoom:1;觸發haslayout。

方法五：給浮動的元素的容器新增display

這種方法可能你見得比較少，但給浮動元素的容器也新增上display:inline-block確確實實可以解決這個清除浮動的問題。

浮動元素的容器裡沒有新增width：100%;那麼新增了display:inline-block 浮動元素的容器是緊緊的包裹著子元素的，而不是像塊級元素那麼完為100%，所以這裡你可以根據自己的實踐需求進行設定。

#div 
#div p 
<
div 
id="div"
class
="clearfix"
>
<
p>float: right;
p>
div>

無width：100%:　　　　　　　　　　　　　　　　　　　　　　　　新增width：100%: