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

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

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

浮動(dòng)是CSS布局中最常用的屬性，然而浮動(dòng)是脫離文檔流的，如果不清除浮動(dòng)的話，會(huì)對(duì)周圍的元素產(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，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動(dòng)方法

父級(jí)div定義偽類: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)類似，zoom(IE專有屬性)可解決ie6、ie7浮動(dòng)問(wèn)題
優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持
建議：推薦使用，建議定義公共類，以減少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ì)被隱藏
建議：只推薦沒有使用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)條就使用吧

云服務(wù)器 GPU云服務(wù)器的清除方法 js緩存的幾種方法清除浮動(dòng) 有效的郵件營(yíng)銷

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50245.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

張金寶

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

CSS選擇器

閱讀 2083·2019-08-30 15:52
css 阻斷合并及其他影響

閱讀 2475·2019-08-29 18:37
浮動(dòng)(Float)

閱讀 830·2019-08-29 12:33
magix中的2種事件綁定方式

閱讀 2870·2019-08-29 11:04
NPM酷庫(kù)051：xml2js，解析XML格式數(shù)據(jù)

閱讀 1586·2019-08-27 10:57
Node 引入 ESM 新方案

閱讀 2127·2019-08-26 13:38
瀏覽器輸入url到發(fā)起http請(qǐng)求所經(jīng)歷的過(guò)程

閱讀 2793·2019-08-26 12:25
JavaScript對(duì)象內(nèi)部屬性及其特性總結(jié)

閱讀 2484·2019-08-26 12:23

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章