幾種有效的清除浮動(dòng)的方法

張金寶發(fā)布于2019-08-01 15:59 / 2789人閱讀

摘要：浮動(dòng)是布局中最常用的屬性，然而浮動(dòng)是脫離文檔流的，如果不清除浮動(dòng)的話，會(huì)對(duì)周?chē)脑禺a(chǎn)生影響。也正是浮動(dòng)脫離文檔流這一特性，使浮動(dòng)成為布局的難點(diǎn)之一浮動(dòng)框可以左右移動(dòng)，直到它的外邊緣碰到包含框或另一浮動(dòng)框的邊緣。

浮動(dòng)是CSS布局中最常用的屬性，然而浮動(dòng)是脫離文檔流的，如果不清除浮動(dòng)的話，會(huì)對(duì)周?chē)脑禺a(chǎn)生影響。也正是浮動(dòng)脫離文檔流這一特性，使浮動(dòng)成為CSS布局的難點(diǎn)之一
浮動(dòng)框可以左右移動(dòng)，直到它的外邊緣碰到包含框或另一浮動(dòng)框的邊緣。當(dāng)元素浮動(dòng)時(shí)，它將不再處于普通文檔流中，相當(dāng)于浮在文檔之上，不占據(jù)空間，但是會(huì)縮短行框，產(chǎn)生文字環(huán)繞的效果
清除浮動(dòng)有好一些方法，但兼容各種瀏覽器的方法卻不多，下面我就介紹幾個(gè)比較有效的兼容的方法:
我們以下面的HTML代碼為例來(lái)說(shuō)明這幾種方法的用法：

對(duì)父級(jí)設(shè)置CSS高度

原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問(wèn)題
建議：不推薦使用，只建議高度固定的布局時(shí)使用
對(duì)應(yīng)CSS代碼：

#box{
    width:500px;
    margin:10px auto;
    background:#ccc;
    height:500px;/*解決代碼*/
}
#sidebar{
    width:190px;
    height:500px;
    float:left;
    background:#f00;
}
#main{
    width:300px;
    height:500px;
    float:right;
    background:#00f;
}

額外標(biāo)簽法

這種方法是在浮動(dòng)元素的最后加一個(gè)標(biāo)簽，用這個(gè)標(biāo)簽清除浮動(dòng)，一般是加

，當(dāng)然也可以是其他標(biāo)簽，比如p、br等。本例加在
的后面。對(duì)應(yīng)的CSS代碼：

#box{
    width:500px;
    margin:10px auto;
    background:#ccc;
}
#sidebar{
    width:190px;
    height:500px;
    float:left;
    background:#f00;
}
#main{
    width:300px;
    height:500px;
    float:right;
    background:#00f;
}
/*清除浮動(dòng)代碼*/
.clear{
    clear:both;
}

原理：添加一個(gè)空div，利用css的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題
缺點(diǎn)：不少初學(xué)者不理解原理,如果頁(yè)面浮動(dòng)布局多，就要增加很多空div，讓人感覺(jué)很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動(dòng)方法

父級(jí)div定義偽類(lèi):after和zoom

#box{
    width:500px;
    margin:10px auto;
    background:#ccc;
    zoom:1
}
#sidebar{
    width:190px;
    height:500px;
    float:left;
    background:#f00;
}
#main{
    width:300px;
    height:500px;
    float:right;
    background:#00f;
}
/*解決代碼*/
#box:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類(lèi)似，zoom(IE專(zhuān)有屬性)可解決ie6、ie7浮動(dòng)問(wèn)題
優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持
建議：推薦使用，建議定義公共類(lèi)，以減少CSS代碼

父級(jí)div定義overflow:hidden

#box{
    width:500px;
    margin:10px auto;
    background:#ccc;
    overflow:hidden;/*解決代碼*/
}
#sidebar{
    width:190px;
    height:500px;
    float:left;
    background:#f00;
}
#main{
    width:300px;
    height:500px;
    float:right;
    background:#00f;
}

原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好
缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏
建議：只推薦沒(méi)有使用position或?qū)?b>overflow:hidden理解比較深的朋友使用

父級(jí)div定義overflow:auto

#box{
    width:500px;
    margin:10 auto;
    background:#ccc;
    overflow:auto;/*解決代碼*/
}
#sidebar{
    width:190px;
    height:500px;
    float:left;
    background:#f00;
}
#main{
    width:300px;
    height:500px;
    float:right;
    background:#00f;
}

原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:auto時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好
缺點(diǎn)：內(nèi)部寬高超過(guò)父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條
建議：不推薦使用，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧