CSS浮动

2020-12-12 22:40

阅读：529

标签：style blog class strong http com

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

上代码:

所有代码访问：http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html

  那些年我们一起清除过的浮动/h1>
  
闭合浮动 与  清除浮动 的区别
  
    .main：很抱歉，现代浏览器中我没能把warp撑高(float:left)
    .side：我也浮动了(float:left)
  
  .footer：我通过设置 clear:both 清除浮动,虽然位置正确了,但是 warp 的高度没变,有些不爽
  
    .main：warp自己闭合浮动了，所以footer不用再清除浮动了(float:left)
    .side：我也浮动了(float:left)
  
  .footer：这次 warp 人品爆发了, 通过 .clearfix 已经闭合浮动了
  闭合浮动的几种方法
  
    1）添加额外标签
    .main{float:left;}
    .side{float:right;}
    
  
  .footer
  
    2）使用 br标签和其自身的 html属性
    .main{float:left;}
    .side{float:right;}
    


  .footer
  
    3)父元素设置 overflow：hidden
    .main{float:left;}
    .side{float:right;}
  
  .footer
  
    6）父元素设置display:table
    .main{float:left;}
    .side{float:right;}
  
  .footer

　　因为浮动导致盒模型为闭合的闭合方法：

　　1：使用额外的标签：

　　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浮动,搜素材,soscw.com

CSS浮动

标签：style blog class strong http com

原文地址：http://www.cnblogs.com/diligenceday/p/3706157.html

上一篇：jQuery中的Ajax几种请求方式

下一篇：088-PHP数组运用 - 通过循环函数过滤部分数组

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：CSS浮动
文章链接：http://soscw.com/essay/23729.html

亲，登录后才可以留言！

CSS浮动

那些年我们一起清除过的浮动/h1>

闭合浮动与清除浮动的区别

闭合浮动的几种方法

1）添加额外标签

2）使用 br标签和其自身的 html属性

3)父元素设置 overflow：hidden

6）父元素设置display:table

评论

热门文章

推荐文章

最新文章

置顶文章

CSS浮动

那些年我们一起清除过的浮动/h1>

闭合浮动 与 清除浮动 的区别

闭合浮动的几种方法

1）添加额外标签

2）使用 br标签和其自身的 html属性

3)父元素设置 overflow：hidden

6）父元素设置display:table

评论

热门文章

推荐文章

最新文章

置顶文章

闭合浮动与清除浮动的区别