那些年咱們一塊兒清除過的浮動

 什麼是浮動？

原理： 在css中使用float:left和float:right,使元素脫離文檔流。同時顯示爲相似display:inline-block的形式（能夠定義寬高，可是又不會換行）。最大好處是相比於以前的table佈局的，更具備靈活性。

 不清除浮動會產生什麼後果？

 好比 我想要以下這樣的佈局效果:

 

　HTML代碼能夠以下寫：

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

 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:40px;background:#DDD}
.right{float:left;width:30%;display:inline;margin-left:12px;height:40px;background:#DDD}

可是因爲有浮動產生，咱們沒有清除浮動，因此會產生以下後果：以下圖所示：

 也就是說 沒有清除浮動 會使咱們的佈局變亂。

 清除浮動的方法有哪些？

 1.父級元素定高度。

  仍是上面的HTML代碼：

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

CSS代碼以下：

.div1{background:#000080;border:1px solid red;height:40px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:40px;background:#DDD}
.right{float:left;width:30%;display:inline;margin-left:12px;height:40px;background:#DDD}

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

優勢：簡單，代碼少，容易掌握

缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題.

建議：不推薦使用，只建議高度固定的佈局時使用

2.添加額外的標籤。

 HTML代碼以下：

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

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:40px;background:#DDD}
.right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}

.clearfloat{clear:both}

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

優勢：簡單，代碼少，瀏覽器支持好，不容易出現怪問題

缺點：很多初學者不理解原理；若是頁面浮動佈局多，就要增長不少空div，代碼語義化變差。

建議：不推薦使用，但此方法是之前主要使用的一種清除浮動方法

 3.父元素設置overflow:hidden

  經過設置父元素overflow值設置爲hidden；在IE6中還須要觸發 hasLayout ，例如 zoom：1；

　Zoom的使用方法：

　zoom : normal | number normal :　

　　默認值。使用對象的實際尺寸 number :　

　　百分數 | 無符號浮點實數。浮點實數值爲1.0或百分數爲100%時至關於此屬性的 normal 值 用白話講解就是zoom:後面的數字即放大的倍數，能夠是數值，也能夠是百分比。如：zoom:1，zoom:120%。 而這個屬性只要在IE中才起做用，因此不多用到它的實際用途，而最常常用到做用是清除浮動等。

 HTML代碼以下：

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

CSS能夠寫成以下代碼：

.div1{background:#000080;border:1px solid red;overflow:hidden;_zoom:1}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:40px;background:#DDD}
.right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}

優勢：不存在結構和語義化問題，代碼量極少。
缺點：內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素；

4.父元素設置 overflow：auto 屬性

 一樣IE6須要觸發hasLayout，演示和3差很少
  優勢：不存在結構和語義化問題，代碼量極少
  缺點：多個嵌套後，firefox某些狀況會形成內容全選；IE中 mouseover 形成寬度改變時會出現最外層模塊有滾動條等，firefox早期版本會無端產生focus等。

5. 父元素也設置浮動。

HTML代碼以下：

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

CSS代碼以下：

.div1{background:#000080;border:1px solid red;width:100%;float:left}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:40px;background:#DDD}
.right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}

優勢：不存在結構和語義化問題，代碼量極少。
缺點：使得與父元素相鄰的元素的佈局會受到影響，不可能一直浮動到body，不推薦使用。

6.父元素設置display:table

HTML代碼以下：

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

CSS代碼以下：

.div1{background:#000080;border:1px solid red;width:100%;display:table;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:40px;background:#DDD}
.right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}

原理：將div屬性變成表格

優勢：結構語義化徹底正確，代碼量極少

缺點：盒模型屬性已經改變，由此形成的一系列問題，不推薦使用。

建議：不推薦使用，只做瞭解。

 

7.使用:after 僞元素

HTML代碼以下：

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

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:left;width:30%;margin-left:12px;display:inline;height:80px;background:#DDD}
    .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

優勢：結構和語義化徹底正確
缺點：複用方式不當會形成代碼量增長。

 總之：都有優勢和缺點 具體的狀況具體分析。我目前通常都用overflow:hidden來解決浮動 到目前爲止尚未碰到什麼問題。