加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

CSS 清理浮动方式

(2011-05-23 16:31:39)
标签:

css

清除浮动

zoom

overflow

clear

隐藏

it

分类: CSS
刚看到了就发出来,大家一起学习,清除浮动
这篇是彪叔的《清理浮动的全家http://twinsenliang.net/skill/20090413.html 里面有目前我觉得完整的清除浮动方式集合。
这是我刚看到的《更简洁的 CSS 清理浮动方式》:http://developer.51cto.com/art/201105/261229.htm

具体的语句是这样的:
 .clearfix:after    
   
 visibility:hidden;   
 display:block;   
 font-size:0;   
 content:" ";   
 clear:both;   
 height:0;   
   
 .clearfix  
   
 zoom:1;   
 }
利用伪类在clearfix元素后面加了一个非display:none的隐藏元素, 即:visibility:hidden ,分隔元素再用clear清除浮动。但是这是在ff/chrome等现代浏览器支持的,IE不支持:after伪类,需要添加zoom:1让其产生haslayout,从而清除浮动。

这个也就是彪叔的第一个方法。
目前我是用overflow:hidden+zoom:1来清除浮动,不用clear。
但是有时候一些浮动嵌套层元素在ie6会神秘消失,触发条件还没有研究透,不过对应的加上position:relative就会正常出现,具体表现是我前阵子做的一个网站http://www.imore.hk/一个浮动li,有时候会神秘消失.
而且元素给强制隐藏了边界,如果有需要负定位的元素或者手贱写个-webkit-box-reflect,则会给截断隐藏。

当然常用的还有让父元素浮动适应子元素的,但这样还是有浮动的问题存在,只不过‘浮动转移’而已……


0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有