2018-3-14 seo達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
浮動是什么?
浮動元素會脫離文檔流進(jìn)行左浮或者右浮,直到碰到父級元素或者其他的浮動元素。
為什么清除浮動:浮動會導(dǎo)致父元素高度坍塌,因為浮動脫離文檔流,浮動以后不占文檔流的位置,撐開的父元素高度肯定會坍塌。
清除浮動的八種方法:
1、父級div給出固定的高度。手動定義height,這樣就解決了父級元素獲取不到高度的問題。
優(yōu)點:代碼量少,簡單容易掌握。
缺點:只適合高度固定的布局,如果高度和父級div不同會出現(xiàn)問題。
2、overflow,設(shè)置overflow:hidden。
優(yōu)點:代碼少,瀏覽器支持。
缺點:會把超出的部分隱藏起來,而且不能配合position使用
3、額外標(biāo)簽,添加一個新的標(biāo)簽,如div,或者br,并且設(shè)置標(biāo)簽的屬性clear:both;清除浮動,讓父級能自動獲得高度。
優(yōu)點:代碼少,瀏覽器支持,不會各種問題。
缺點:會有很多空的div或者br。
4、使用單偽類after和zoom,使用方法:
.clearfloat:after{
content:"";//設(shè)置內(nèi)容為空
height:0;//高度為0
line-height:0;//行高為0
display:block;//將文本轉(zhuǎn)為塊級元素
visibility:hidden;//將元素隱藏
clear:both//清除浮動
}
.clearfloat{
zoom:1;為了兼容IE
}
優(yōu)點:瀏覽器支持好,大型的瀏覽器都在使用,建議使用。
缺點:代碼多,需要after和zoom都要使用才能兼容主流的瀏覽器。
5、雙偽類清除浮動。使用方法:
.clearfloat:before,.clearfloatafter {
content: "";
display: block;
clear: both;
}
.clearfloat {
zoom: 1;
}
缺點:不嚴(yán)謹(jǐn)不建議使用
6、父級div跟著浮動,所有代碼一起浮動就會形成一個整體,
缺點:會產(chǎn)生新的問題,不建議使用。
7、父級定義display:table;將div屬性變成的表格。
缺點:產(chǎn)生新的問題,而且影響布局。
8、overflow:auto;需要設(shè)置width,不設(shè)置height,瀏覽器會自動檢測浮動區(qū)的高度。
缺點:容易生成滾動條。
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com