CSS浮动

CSS清浮动：==>抄自梦想天空：http://www.cnblogs.com/lhb25/p/3674353.html

上代码:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

所有代码访问：http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html<br><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：使用额外的标签 ： <div style="clear:both;"></div>

　　2：.clearfix:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }.clearfix { *zoom:1;}

　　3: overflow:hidden; *zoom:1;

　　4: 父元素设置display:table

　　优化后的cf：

?

1 2 3 4 5 6 7 8 9 10

1：  <br>   .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }  　.clearfix { *zoom:1; }.<br><br> 2： 　　/* For modern browsers */ 　　.cf:before,.cf:after { 　　content:""; 　　display:table; 　　} 　　.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */ 　　.cf { zoom:1; }