浮動與清除浮動

具體內容：

一、浮動與清除浮動是html佈局中很重要的一個部分，使用十分的普遍，要徹底掌握，搞清楚內部的原理。清除浮動是每個 web前臺設計師必須掌握的技能。

二、浮動會使當前標籤產生向上浮的效果，同時會影響到先後標籤、父級標籤的位置及width和height 屬性。

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

四、解決浮動引發的問題有多種方法，但有些方法在瀏覽器兼容性方面還有問題。 以下具體問題具體分析。

五、浮動是因爲使用了float屬性以後，元素脫離了正常的bfc模式下的正常位置，會形成wrap塌陷，因此要清除浮動，保持父元素塊與其周圍的佈局穩定。

具體方法：

一、結尾處加空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} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    /*清除浮動代碼*/ 
    .clearfloat{clear:left;} /*或者寫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能自動獲取到高度，包裹內部的子元素，也就是讓子元素撐開父元素。

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

缺點：若是頁面浮動佈局多，就要增長不少空div，讓人感受很很差。增長了沒有意義的div，不利於頁面優化操做。

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

二、父級div定義 僞類:after 和 父元素添加屬性：zoom:1; 

<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} /*父元素要添加zoom:1;這句主要是爲了兼容IE6和IE7，hasLayout()*/
</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浮動問題。添加這個屬性就是爲了兼容IE6，IE7。

優勢：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）。

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

建議：推薦使用，建議定義公共類，以減小CSS代碼。 就像上面同樣，定義好樣式，使用的時候直接添加clearfloat類。

三、父級div定義 overflow:hidden; 或者設置overflow的值爲auto;可是最好保證設置的父元素寬度大於子元素寬度的和，否則就會出現滾動條。若是不用兼容ie8如下就能夠不設置width||zoom;auto屬性值不建議使用。

<style type="text/css"> 
    /*這裏說明定義width或者zoom是爲了兼容ie8一下瀏覽器。*/
    /*zoom:1會觸發ie（ie8如下）的haslayout，恰好能清理浮動。*/
    .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow: hidden;} /*定義寬度width||添加zoom:1;在高版本ie或者其餘瀏覽器不用添加。*/
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;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時，瀏覽器會自動檢查浮動區域的高度。

優勢：簡單、代碼少、瀏覽器支持好。

缺點：不能和position配合使用，由於超出的尺寸的會被隱藏overflow:hidden;。 

建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。

四、父級div 也一塊兒浮動 ，父元素上添加屬性float:left||right;

這個方法會讓父元素也浮動，總體一塊兒浮動就仍是一個總體了，可是會產生新的浮動問題，因此這種方法不可取。

五、父級div定義 display:table;

<style type="text/css"> 
    .div1{background:#000080;border:1px solid red;margin-bottom:10px;/*解決代碼*/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> 

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

原理：將div屬性變成表格 

優勢：沒有優勢 

缺點：會產生新的未知問題。 

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

六、父級div定義 height;

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

原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。
這其實並無解決浮動的問題，只是肯定了父元素的高，下邊的元素接觸不到浮動的元素了，也就看着像是清除了浮動。 

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

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

建議：不推薦使用，只建議高度固定的佈局時使用。在高度肯定的時候可使用，高度自適應的話就算了吧，在無線端頁面能夠，可使用rem來相對於屏幕寬度自適應，可是終究也是高度固定。