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

資訊專欄INFORMATION COLUMN

幾種有效的清除浮動的方法

hss01248 / 3330人閱讀

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

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

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題
優(yōu)點(diǎn)：簡單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題
建議：不推薦使用，只建議高度固定的布局時使用
對應(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)簽法

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

，當(dāng)然也可以是其他標(biāo)簽，比如p、br等。本例加在
的后面。對應(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;
}
/*清除浮動代碼*/
.clear{
    clear:both;
}

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

父級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浮動問題
優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持
建議：推薦使用，建議定義公共類，以減少CSS代碼

父級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，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好
缺點(diǎn)：不能和position配合使用，因為超出的尺寸的會被隱藏
建議：只推薦沒有使用position或?qū)?b>overflow:hidden理解比較深的朋友使用

父級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，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好
缺點(diǎn)：內(nèi)部寬高超過父級div時，會出現(xiàn)滾動條
建議：不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧

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

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

相關(guān)文章

  • 幾種有效的清除浮動的方法

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

    張金寶 評論0 收藏0

  • css 盒模型 文檔流 幾種清除浮動的方法

    摘要：但是不會超出內(nèi)邊距的范圍。漏加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏給了標(biāo)準(zhǔn)流的盒子。清除浮動清除浮動主要為了解決父級元素因為子級浮動引起內(nèi)部高度為的問題。盒模型 1、box-sizing: content-box 是普通的默認(rèn)的一種盒子表現(xiàn)模式 盒子大小為 width + padding + border ? content-box:此值為其默認(rèn)...

    gitmilk 評論0 收藏0

  • 實現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    golden_hamster 評論0 收藏0

  • 實現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    IamDLY 評論0 收藏0

  • 實現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    Hegel_Gu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<