問題描述

CSS清除浮動有幾種方法？

問題解答

CSS清除浮動有幾種方法？-PHP中文網問答-CSS清除浮動有幾種方法？-PHP中文網問答

圍觀一下哦，學習一下。

方法一：使用帶clear屬性的空元素

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

優點：簡單，代碼少，瀏覽器兼容性好。缺點：需要添加大量無語義的html元素，代碼不夠優雅，后期不容易維護。

方法二：使用CSS的overflow屬性

給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設置容器寬高或設置 zoom:1。在添加overflow屬性后，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

方法三：給浮動的元素的容器添加浮動

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

方法四：使用鄰接元素處理

什么都不做，給浮動元素后面的元素添加clear屬性。

方法五：使用CSS的:after偽元素

結合 :after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之后最近的元素）和 IEhack ，可以完美兼容當前主流的各大瀏覽器，這里的 IEhack 指的是觸發 hasLayout。給浮動元素的容器添加一個clearfix的class，然后給這個class添加一個:after偽元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。