如何使用css實現(xiàn)清除浮動

這篇文章主要介紹如何使用css實現(xiàn)清除浮動，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在路橋等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站設計網(wǎng)站設計制作定制網(wǎng)站制作,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站建設,成都全網(wǎng)營銷推廣,外貿(mào)網(wǎng)站制作,路橋網(wǎng)站建設費用合理。

清除浮動的方法：1、父級div定義height，語法“height:高度”；2、結尾處加空div并設置“clear:both”樣式；3、父級div定義偽類“:after”和zoom；4、父級div定義“overflow:hidden”。

浮動會使當前標簽產(chǎn)生向上浮的效果，同時會影響到前后標簽、父級標簽的位置及 width height 屬性。

而且同樣的代碼，在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。

解決浮動引起的問題有多種方法，但有些方法在瀏覽器兼容性方面還有問題。

1、父級div定義 height

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red;
    /*解決代碼*/
    height:200px;
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px;
    width:98%
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
    .rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}
</style>
</head>
    <body>
        <div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
        </div>
        <div class="div2">div2</div>
    </body>
    </html>

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優(yōu)點：簡單，代碼少，容易掌握

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題

2、結尾處加空div標簽 clear:both

<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
.rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}
/*清除浮動代碼*/
.clearfloat{
    clear:both
}
</style>

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>    
    <div class="clearfloat"></div>
</div>
<div class="div2">div2</div>

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優(yōu)點：簡單，代碼少，瀏覽器支持好，不容易出現(xiàn)怪問題

缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不爽

3、父級div定義偽類:after 和 zoom

<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red;
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
.rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}
/*清除浮動代碼*/
.clearfloat:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}
.clearfloat{
    zoom:1
}
</style>

<div class="div1 clearfloat">
        <div class="left">Left</div>
        <div class="right">Right</div>
</div>
<div class="div2">div2</div>

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

優(yōu)點：瀏覽器支持好，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

缺點：代碼多，不少初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持。

4、父級div定義 overflow:hidden

<style type="text/css">
.div1{
    background:#000080;
    border:1px solid red;
    /*解決代碼*/
    width:98%;
    overflow:hidden
}
.div2{
    background:#800080;
    border:1px solid red;
    height:100px;
    margin-top:10px;
    width:98%
}
.left{
    float:left;
    width:20%;
    height:200px;
    background:#DDD
}
.rightright{
    float:rightright;
    width:30%;
    height:80px;
    background:#DDD
}

</style>

<div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
</div>
<div class="div2">div2</div>

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度

優(yōu)點：簡單，代碼少，瀏覽器支持好

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

以上是“如何使用css實現(xiàn)清除浮動”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：如何使用css實現(xiàn)清除浮動
本文鏈接：http://www.chinadenli.net/article0/pgspio.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站建設、面包屑導航、商城網(wǎng)站、自適應網(wǎng)站、網(wǎng)頁設計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何使用css實現(xiàn)清除浮動