巧妙clearfix解決css浮動問題

如何用clear來解決css浮動問題，應該是眾多前端開發人員所關心的問題，是clear還是clearfix，其實我們最終一個目的就是讓浮動產生更多的影響，最為一個前端人員，我們有必要深入研究和探討…

萬能float閉合，得知很多朋友都在使用下面的通用解決方案：

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

上訴辦法是在需要清除浮動的地方加個div.clear或br.clear，我們知道這樣能解決基本清浮動問題。但是這種方法的最大缺陷就是改變了html結構，雖然只是加上div。

最優浮動閉合方案（這是我們推薦的）：

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

clearfip* +height:1%;}

   

用法很簡單，在浮動元素的父雲素上加入class=”clearfix」。你會發現這個辦法也有個弊端，但的確是小問題。改變css寫法就ok了：

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

clearfix{*+height:1%;}+height:1%;

   

以上寫法就避免了改變html結構，直接用css解決了。

很拉轟的浮動閉合辦法：

 

clearfix{overflow:auto;_height:1%}    

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

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

clearfix{overflow:hidden;_zoom:1;}