當(dāng)我們在使用CSS布局時，經(jīng)常會用到浮動（float），來實現(xiàn)元素的懸浮效果。但是有時候我們會發(fā)現(xiàn)，因為浮動的存在，元素布局產(chǎn)生了一些問題，這時候我們就需要用到清除浮動（clear float）。

清除浮動主要是為了避免父元素高度塌陷（collapse），其實也就是清除浮動兩個字的意思。在CSS中，清除浮動的方式有很多，但有時候我們執(zhí)行清除浮動的代碼卻發(fā)現(xiàn)無效，那么這時候我們需要找到問題所在，掌握正確的清除浮動方法。

常見的清除浮動方式有以下幾種：

.clearfix:after {
content:"";
display:block;
clear:both;
}

這樣可以為清除浮動的元素（即想要清除浮動的父元素）添加一個“clear:both”屬性，就可以成功清除浮動了。

.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}

這樣的清除浮動方式相比之前的方式，少了“display:block”屬性，但它多了“display:table”屬性，這樣的方式對于一些奇怪的問題可以有所幫助。

.clearfix {
*zoom:1;
}
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}

這種方式其實就是添加一個zoom:1的hack，用來觸發(fā)IE6/7的hasLayout屬性，防止出現(xiàn)奇怪的問題。

除了以上幾種方式，當(dāng)然還有其他的清除浮動方式，但無論哪種方式，記住都是清除浮動的父元素添加屬性，而不是清除浮動的子元素添加屬性。此外，當(dāng)我們使用CSS布局的時候，也需要注意元素的尺寸，如果不夠清除浮動可能也會失效。