今天向大家推薦一個實例，非常簡潔易用。

給需要閉合的DIV（class為clearfix）加上如下的CSS樣式即可：

.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}

不過貌似這樣有點麻煩，呵呵，大前端常用的是下面的：

.clear{clear:both;height:0px;overflow:hidden;}>

得知很多同學都在使用下面的骨灰級解決辦法：

.clear{clear:both;height:0;overflow:hidden;}

上訴辦法是在需要清除浮動的地方加個div.clear或者br.clear，我們知道這樣能解決基本清浮動問題。

但是這種方法的最大缺陷就是改變了html結(jié)構(gòu)，雖然只是加個div。

最優(yōu)浮動閉合方案（這是我們推薦的）：

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}

用法很簡單，在浮動元素的父云素上添加class=”demo clearfix”。

你會發(fā)現(xiàn)這個辦法也有個弊端，但的確是小問題。改變css寫法就ok了：

.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}

以上寫法就避免了改變html結(jié)構(gòu)，直接用css解決了。

很拉轟的浮動閉合辦法：

.clearfix{overflow:auto;_height:1%}

這種辦法是我看國外的一篇文章得到的方案，測試了，百試不爽，真的很簡單，很給力。喜歡的同學也可以試試這個辦法。

這種方法是端友radom提供的，測試通過：

.clearfix{overflow:hidden;_zoom:1;}

• css
• 浮動