清除浮動,clearfix的幾種解決方案
阿新 • • 發佈:2019-01-02
之前給大家介紹兩種浮動閉合的辦法CSS清除浮動 萬能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}
.clearfix{*+height:1%;}
用法很簡單,在浮動元素的父雲素上新增class=”demo clearfix”。
你會發現這個辦法也有個弊端,但的確是小問題。改變css寫法就ok了:
.demo:after,.demo2:after{content:”.”;display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}
以上寫法就避免了改變html結構,直接用css解決了。
很拉轟的浮動閉合辦法:
.clearfix{overflow:auto;_height:1%}
這種辦法是我看國外的一篇文章得到的方案,測試了,百試不爽,真的很簡單,很給力。喜歡的同學也可以試試這個辦法。
這種方法是端友radom提供的,測試通過:
.clearfix{overflow:hidden;_zoom:1;}