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