CSS 清理浮动方式
(2011-05-23 16:31:39)
标签:
css清除浮动zoomoverflowclear隐藏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,则会给截断隐藏。
当然常用的还有让父元素浮动适应子元素的,但这样还是有浮动的问题存在,只不过‘浮动转移’而已……
这篇是彪叔的《清理浮动的全家》http://twinsenliang.net/skill/20090413.html 里面有目前我觉得完整的清除浮动方式集合。
这是我刚看到的《更简洁的 CSS 清理浮动方式》:http://developer.51cto.com/art/201105/261229.htm
具体的语句是这样的:
利用伪类在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,则会给截断隐藏。
当然常用的还有让父元素浮动适应子元素的,但这样还是有浮动的问题存在,只不过‘浮动转移’而已……