在使用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;}。使用中需注意：1、該方法中必須為需要清除浮動元素的偽對象設置height:0，否則該元素會比實際高出若干像素；2、content屬性是必須的，但其值可以為空。此方法實用有效，且不用添加無意義的標簽，但CSS代碼較復雜，不夠簡潔明了。
（3）使用overflow屬性
此方法有效地解決了通過空標簽元素清除浮動而不得不增加無意代碼的弊端。使用該方法是只需在需要清除浮動的元素中定義CSS屬性：overflow:auto;其目的是讓高度自適應，zoom:1;是為了兼容IE6(zoom不符合W3C標準)，也可以用height:1%;的方式來解決。
這三種清除浮動的方法在實際應用中均實用有效，至于使用哪一種那就是仁者見仁智者見智了，本人還是習慣使用第一種方法，簡單快捷無壓力，而且那幾個清除浮動的標簽其實也無傷大雅！
文章列表
留言列表
