所有代码访问：http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html
<div class="content">
  <h1>那些年我们一起清除过的浮动/h1>
  <h2>闭合浮动 与  清除浮动 的区别</h2>
  <div class="warp">
    <div class="main left">.main：很抱歉，现代浏览器中我没能把warp撑高(float:left)</div>
    <div class="side left">.side：我也浮动了(float:left)</div>
  </div>
  <div class="footer clear">.footer：我通过设置 clear:both <strong>清除浮动</strong>,虽然位置正确了,但是 warp 的高度没变,有些不爽</div>
  <div class="warp clearfix" id="floa7">
    <div class="main left">.main：warp自己闭合浮动了，所以footer不用再清除浮动了(float:left)</div>
    <div class="side left">.side：我也浮动了(float:left)</div>
  </div>
  <div class="footer">.footer：这次 warp 人品爆发了, 通过 .clearfix 已经<strong>闭合浮动</strong>了</div>
  <h2>闭合浮动的几种方法</h2>
  <div class="warp" id="float1">
    <h3>1）添加额外标签</h3>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    <div style="clear:both;"></div>
  </div>
  <div class="footer">.footer</div>
  <div class="warp" id="float2">
    <h3>2）使用 br标签和其自身的 html属性</h3>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    <br clear="all" />
  </div>
  <div class="footer">.footer</div>
  <div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
    <h3>3)父元素设置 overflow：hidden</h3>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
  </div>
  <div class="footer">.footer</div>
  <div class="warp" id="float6" style="display:table;">
    <h3>6）父元素设置display:table</h3>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
  </div>
  <div class="footer">.footer</div>
</div>

1：  
   .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
 　.clearfix { *zoom:1; }.


2：
　　/* For modern browsers */
　　.cf:before,.cf:after {
　　content:"";
　　display:table;
　　}
　　.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
　　.cf { zoom:1; }