IT工程師數位筆記本

所有代碼訪問：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; }