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,则会给截断隐藏。
当然常用的还有让父元素浮动适应子元素的,但这样还是有浮动的问题存在,只不过‘浮动转移’而已……

 加载中…
加载中…