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

luckyw發表於2019-02-16

浮動是CSS佈局中最常用的屬性，然而浮動是脫離文件流的，如果不清除浮動的話，會對周圍的元素產生影響。也正是浮動脫離文件流這一特性，使浮動成為CSS佈局的難點之一
浮動框可以左右移動，直到它的外邊緣碰到包含框或另一浮動框的邊緣。當元素浮動時，它將不再處於普通文件流中，相當於浮在文件之上，不佔據空間，但是會縮短行框，產生文字環繞的效果
清除浮動有好一些方法，但相容各種瀏覽器的方法卻不多，下面我就介紹幾個比較有效的相容的方法:
我們以下面的HTML程式碼為例來說明這幾種方法的用法：

<div id="box">
    <div id="sidebar"></div>
    <div id="main"></div>
</div>

對父級設定CSS高度

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

額外標籤法

這種方法是在浮動元素的最後加一個標籤，用這個標籤清除浮動，一般是加<div class="clear"></div>，當然也可以是其他標籤，比如p、br等。本例加在<div id="main"></div>的後面。對應的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能自動獲取到高度
優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題
缺點：不少初學者不理解原理,如果頁面浮動佈局多，就要增加很多空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有點類似，zoom(IE專有屬性)可解決ie6、ie7浮動問題
優點：瀏覽器支援好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：程式碼多、不少初學者不理解原理，要兩句程式碼結合使用才能讓主流瀏覽器都支援
建議：推薦使用，建議定義公共類，以減少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時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、程式碼少、瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏
建議：只推薦沒有使用position或對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時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、程式碼少、瀏覽器支援好
缺點：內部寬高超過父級div時，會出現滾動條
建議：不推薦使用，如果你需要出現滾動條或者確保你的程式碼不會出現滾動條就使用吧

相關文章