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>