問題描述

CSS清除浮動(dòng)有幾種方法？

問題解答

CSS清除浮動(dòng)有幾種方法？-PHP中文網(wǎng)問答-CSS清除浮動(dòng)有幾種方法？-PHP中文網(wǎng)問答

圍觀一下哦，學(xué)習(xí)一下。

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

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

優(yōu)點(diǎn)：簡單，代碼少，瀏覽器兼容性好。缺點(diǎn)：需要添加大量無語義的html元素，代碼不夠優(yōu)雅，后期不容易維護(hù)。

方法二：使用CSS的overflow屬性

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

方法三：給浮動(dòng)的元素的容器添加浮動(dòng)

給浮動(dòng)元素的容器也添加上浮動(dòng)屬性即可清除內(nèi)部浮動(dòng)，但是這樣會(huì)使其整體浮動(dòng)，影響布局，不推薦使用。

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

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

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

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