CSS浮动

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

上代码:

所有代码访问: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:使用额外的标签 : <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:  
.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; }

  

你可能感兴趣的:(css)