CSS 之 清除 float 經常使用的方法

　　大多數前端使用.clearfix:after{ .....}  和 .clearit{....}的組合來清除浮動。

　　前端開發常常用到浮動 float:left; float:right; 有浮動就須要清除他們，after僞類因爲受到ie6 7的不支持因此大多數時候，通常都須要定義一個固定的class名設置屬性clear的值both的div 二者配合使用.

<style type="text/css">
        *{ margin: 0; padding: 0}
        .left{ float: left;}
        .clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }  //僞類清除
        .clearfix { zoom:1; }    
        .clearit { clear:both; height:0; font-size:0; overflow:hidden; }  //設置class名清除
        .main{ width: 1000px;}
        .myRight,.myLeft{ width: 200px; height: 200px; background: #ddd;}
        .myRight{ background: red}
</style>

 

結構一：

<div class="main">
    <div class="myLeft left">左側</div>
    <div class="myRight left">右側</div> 
</div>
<div class="footer">
    <p>底部</p>
</div>

 

1  此時不清除浮動 標準瀏覽器 和ie8+  p標籤會跑到 右側浮動div的旁邊 如圖：

IE6 IE7下 

 

咱們能夠看出，標準和ie8下 class名爲main的div 沒被撐開，IE6 IE7下卻被浮動元素撐開了。

咱們只須要解決 標準 和 IE8+的浮動 就能夠；如今咱們給main 追加個class名以下：

<div class="main clearfix">    // 此處追加
    <div class="myLeft left">左側</div>
    <div class="myRight left">右側</div> 
</div>
 <div class="footer">
    <p>我是底部</p>
</div>

 

 

由於咱們在css中設置了 .clearfix:after{..}因此浮動就不會繼承下去

 

此時給 .main加上背景{ background:blue };

        咱們發現  標準和 IE6+   的 main 都已被撐開以下圖：

IE6下

標準下：

其餘瀏覽器下就不截圖了。

 

結構二：

此時須要用到  .clearit{ ...}

<style type="text/css">

        *{ margin: 0; padding: 0}

        .left{ float: left;}

 

        .clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }                                                             //僞類清除

        .clearfix { zoom:1; }    

        .clearit { clear:both; height:0; font-size:0; overflow:hidden; }  //設置class名清除

 

        .main{ width: 1000px;}

        .myLast,.myRight,.myLeft{ width: 200px; height: 200px; background: #ddd;}

        .myRight{ background: red}

        .myLast{ background:purple； height:140px}

</style>

////////此時浮動 元素 和 不須要浮動的元素 被包在同一個 父親下

 

<div class="main">

 

    <div class="myLeft left">左側</div>

    <div class="myRight left">右側</div> 

 

    <div class="myLast">最後一個</div>

</div>

IE6 下

元素繼承浮動跑到 浮動元素旁邊 並且 有本身的背景

 

 

IE8+ 和標準

最後一個DIV沒繼承浮動 可是 元素內的 內容 被擋在浮動DIV後面，背景消失，鑽入浮動元素底下。

 

此時 給右側DIV加clearfix  class名;以下圖：      

<div class="main">

 

    <div class="myLeft left">左側</div>

    <div class="myRight left clearfix">右側</div> 

 

    <div class="myLast">最後一個</div>

</div>

標準下和ie6+ 下 效果不變；

 

<div class="main">

 

    <div class="myLeft left">左側</div>

    <div class="myRight left">右側</div>

 

    <div class="clearit"></div>   //換種方法加上class爲clearit的div

 

    <div class="myLast">最後一個</div>

</div>

 

ie6+ 和標準下 以下圖：

 

此時 ie6+和標準下 顯示效果一致  浮動被清除；

這種簡單結構的時候 也可給 最後一個div 設置 clear:both 這個屬性和值；也能獲得此效果，

在結構比較複雜 清除頻繁的時候 不如 在浮動元素後面 加一個 <div class="clearit"></div>更方便，    固然 能用after僞類清除浮動的時候儘可能用 僞類清除，這要 既減小冗餘代碼，用能便於之後修改和維護！！！

 

 

經過指定CSS屬性float的值,從而使元素向左或向右浮動,而後由後繼元素向上移動以填補前面元素的浮動而空出的可用空間。CSS的float屬性，做用就是改變塊元素對象的默認顯示方式，HTML標籤設置了float屬性以後，它將再也不獨自佔據一行，從而能夠實現多個元素同處一行的效果。Float的功能很強大，可是若是沒有好好掌握而使用極可能會成爲你調試樣式的噩夢。

使用Float樣式，若是沒有清除浮動，那麼有浮動元素的父元素容器將沒法自動撐開。若是沒有清除內部浮動，此時會致使浮動的父元素沒法自動撐開到自己應有的高度。也就是說：當一個元素是浮動的，若是沒有關閉浮動時，其父元素不會包含這個浮動元素，由於此時浮動元素從文檔流中脫離。

因此須要在樣式定義的後面進行清除浮動，清除浮動的方法有幾種：

Clear:both清除浮動

clear清除浮動主要是借用clear屬性來清除浮動，這是一種比較陳舊的清除浮動方法，可是感受通常遇到這種問題都會用這種方法去清除浮動。使用clear:both來清除浮動，咱們須要在須要清除浮動地方的後面緊接着增長一個額外元素，好比說一個div標籤，而且定義他們的樣式爲「clear:both」,其一般使用的結構方式以下：

複製代碼

代碼以下:

<div class="demo A">
<div class="demoB demoFloat">float left</div>
<div class="demoC demoFloat">float right</div>
<div class="demoD demoFloat">not float</div>
<div class="clear"></div>
</div>

複製代碼

代碼以下:

<pre name="code" class="css"> .clear { clear:both;/*主要使用這個屬性來清除浮動*/ /*爲了避免讓ie具備必定的空間，我的建議加上下面三個屬性*/ height: 0; line-height: 0; font-size: 0; }</pre> <pre></pre> <p></p> <pre></pre> <p></p> <h4 style="margin:0px; line-height:30px; color:rgb(81,177,72); font-family:'Microsoft Yahei'"><a name="t1"></a> <span style="white-space:pre"></span>2.使用overflow</h4> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> <span style="white-space:pre"></span>用overflow方法來清除浮動相對來講比較簡單，只須要在有浮動的元素上面加上下面的屬性：</p> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> </p><pre name="code" class="css"> .A { overflow: auto; zoom: 1;/*在ＩＥ下觸發其layout，也要以使用_height:1%來代替zoom*/ }</pre><p></p> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> <span style="white-space:pre"></span>使用overflow屬性來清除浮動有一點須要注意，overflow屬性共有三個屬性值：hidden,auto,visible。咱們可使用hiddent和auto值來清除浮動，但切記不能使用visible值，若是使用這個值將沒法達到清除浮動效果，其餘兩個值均可以。</p> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> <span style="white-space:pre"></span>對於overflow屬性清滁浮動咱們還能夠這樣應用：</p> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> </p><pre name="code" class="css"> .A { overflow: auto;/*除ＩＥ6以及其如下版本不識別以外，其餘瀏覽器都識別*/ } * html .A { height: 1%; /* IE5-6 */ }</pre><p></p> <h4 style="margin:0px; line-height:30px; color:rgb(81,177,72); font-family:'Microsoft Yahei'"><a name="t2"></a> <span style="white-space:pre"></span>3.clearfix方法</h4> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> <span style="white-space:pre"></span>這種方法清除浮動是如今網上最拉風的一種清除浮動，是利用:after和:before來在元素內部插入兩個元素塊，從而達到清除浮動的效果。其實現原理相似於clear:both方法，只是區別在於:clear在html插入一個div.clear標籤，而clearfix利用其僞類clear:fix在元素內部增長一個相似於div.clear的效果。下面來看看其具體的使用方法：</p> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> HTML Code:</p> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> </p><pre name="code" class="css"> <div class="demo A clearfix"> <div class="demoB demoFloat">float left</div> <div class="demoC demoFloat">float right</div> <div class="demoD demoFloat">not float</div> </div></pre><p></p> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> <span style="white-space:pre"></span>使用clearfx來清除浮動最主要掌握一點，須要在有浮動元素的父元素中加入一個叫clearfix的class名稱，好比說咱們這個例子，咱們須要在div.A中加入一個clearfix的class名。接着在給這個clearfix加上樣式</p> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> </p><pre name="code" class="css"> .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} /* IE < 8 */</pre><p></p> <p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px"> <span style="white-space:pre"></span>其實只使用clearfix:after就能夠達到清除浮動的效果，但只使用clearfix:after時在跨瀏覽器兼容問題會存在一個垂直邊距疊加的bug，因此爲了讓瀏覽器兼容這個clearfix的清除浮動，在原來的基礎上加止clearfix:before,這樣就解決了跨瀏覽器的兼容問題。</p> <p style="margin-top:0px; margin-bottom:9px; font-family:'Microsoft Yahei'; line-height:28px"> <span style="white-space:pre"></span>在這麼多種清除浮動的方法中，都沒有離開最原始的clear:both方法，特別是clearfix:after清除浮動，徹底就是clear:both的一種變身，區別在於不須要在html增長一個標籤，而只須要在有浮動元素的父元素中加上一個clearfix的class名，這樣就輕鬆解決了清除浮動的問題。</p>