<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>  
<br>