清除float常用方法(:after和clear:both)

  很多前端都是用.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偽類清除浮動的時候盡量用 偽類清除，這要 既減少冗余代碼，用能便於以后修改和維護！！！