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

hss01248 發布于2019-08-29 11:33 / 3325人閱讀

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

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

對父級設置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;
}

額外標簽法

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

，當然也可以是其他標簽，比如p、br等。本例加在
的后面。對應的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時，會出現滾動條
建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧

云服務器 GPU云服務器的清除方法 js緩存的幾種方法清除浮動有效的郵件營銷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111729.html

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

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

張金寶 2019-08-01 15:59 評論0 收藏0
css 盒模型文檔流幾種清除浮動的方法

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

gitmilk 2019-04-23 13:24 評論0 收藏0
實現三欄布局的幾種方法

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

golden_hamster 2019-08-02 11:55 評論0 收藏0
實現三欄布局的幾種方法

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

IamDLY 2019-08-29 17:12 評論0 收藏0
實現三欄布局的幾種方法

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

Hegel_Gu 2019-08-23 12:52 評論0 收藏0