詳解css清除浮動方法（9種方法）

浮動的定義：使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。

爲何要清除浮動？

清除浮動主要是爲了解決，父元素由於子級元素浮動引發的內部高度爲0的問題
當父元素不給高度的時候，內部元素不浮動時會撐開，而浮動的時候，父元素變成一條線

clear：both：在左右兩側均不容許浮動元素。本質就是閉合浮動， 就是讓父盒子閉合出口和入口，不讓子盒子出來

clear:left | right | both | none | inherit：元素的某個方向上不能有浮動元素

若是咱們清除了浮動，父元素自動檢測子盒子最高的高度，而後與其同高。

高度塌陷：若是父元素只包含浮動元素，且父元素未設置高度和寬度的時候。那麼它的高度就會塌縮爲零

解決方法：

1.父級div定義僞類：after和zoom

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

缺點：ie6-7不支持僞元素：after，使用zoom:1觸發hasLayout.

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

<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}
    .right{float:right;width:30%;height:80px;background:#DDD}

    /*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
    .clearfloat{zoom:1}
</style>
複製代碼

2.使用before和after雙僞元素清除浮動

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

<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}
    .right{float:right;width:30%;height:80px;background:#DDD}

    /*清除浮動代碼*/
    .clearfloat:after, .clearfloat:before {content: ""; display: table;}
    .clearfloat:after {clear: both;}
    .clearfloat {*zoom: 1;}
</style>
複製代碼

3.在結尾處添加空div標籤clear:both
原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度
缺點：若是頁面浮動佈局多，就要增長不少空div，讓人感受很不爽, 缺點：添加無心義標籤，語義化差

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

<style type="text/css">
    .div1{background:#000080;border:1px solid red}
    .div2{background:#800080;border:1px solid red;height:100px; }

    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}

    /*清除浮動代碼*/
    .clearfloat{clear:both}
</style>
複製代碼

4.父級div定義height
原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題
缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題 建議：不推薦使用，只建議高度固定的佈局時使用

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

<style type="text/css">
    .div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;}
    .div2{background:#800080;border:1px solid red;height:100px; }

    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>
複製代碼

5.父級div定義overflow:hidden 經過觸發BFC方式，實現清除浮動
內容增多的時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示要溢出的元素
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
缺點：不能和position配合使用，由於超出的尺寸的會被隱藏 建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用

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

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

6.父級div定義overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
缺點：內部寬高超過父級div時，會出現滾動條。 建議：不推薦使用，若是你須要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

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

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

7.父級div也一塊兒浮動
原理：全部代碼一塊兒浮動，就變成了一個總體 優勢：沒有優勢
缺點：會產生新的浮動問題。 建議：不推薦使用，只做瞭解。

<div class="div1"> 
	<div class="left">Left</div> 
	<div class="right">Right</div>
</div>
<div class="div2">
   div2
</div>
<style type="text/css">
    .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;float:left}
    .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解決代碼*/clear:both}

    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>複製代碼

8.父級div定義display:table
原理：將div屬性變成表格 優勢：沒有優勢 缺點：會產生新的未知問題 建議：不推薦使用，只做瞭解

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

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;display:table;}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 
複製代碼

9.結尾處加br標籤clear:both

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

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;zoom:1}
   .div2{background:#800080;border:1px solid red;height:100px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   .clearfloat{clear:both}
</style> 
複製代碼

                                        ​