css对于IE7、FF、OP清除浮动的最优方法

在css森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且ff、op、ie7都支持，从此可以告别那又长兼容性又差的ff清浮动的方法了。  

方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。 
css代码

ul {
	list-style: none;
	height: auto;
	margin: 0;
	p adding: 0;
	background-color: #436973;
}
li {
	float: left;
	width: 80px;
	height: 80px;
	background-color: #83B1DF;
}
.demo {
	clear: both;
	border: 1px solid #FF00FF;
	margin-bottom: 5px;
}
.overflow {
	overflow: auto;
	zoom: 1;
	background-color: #43FF73;
}
ul {
	list-style: none;
	height: auto;
	margin: 0;
	padding: 0;
	background-color: #436973;
}
li {
	float: left;
	width: 80px;
	height: 80px;
	background-color: #83B1DF;
}
.demo {
	clear: both;
	border: 1px solid #FF00FF;
	margin-bottom: 5px;
}
.overflow {
	overflow: auto;
	zoom: 1;
	background-color: #43FF73;
}

HTML代码

	

		
1
		
2
		
3
		
4
		
5
		
6
		
7
		
8
		
9
	


	

		
1
		
2
		
3
		
4
		
5
		
6
		
7
		
8
		
9
	

其中zoom是为了IE6准备的。

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
        
7
 
        
8
 
        
9
 
    
 
 
 
    
 
        
1
 
        
2
 
        
3
 
        
4
 
        
5
 
        
6
 
        
7
 
        
8
 
        
9
 
    
 
 

 
  
 
    
@@##@@
 
    
 
      
Ghost Zhang
 
      
Email:lovej1bz@gmail.com
立即学习“前端免费学习笔记（深入）”；
 
      
QQ:22168741
 
      
ORG:WebReBuild.ORG www.CSSForest.ORG
 
      Blog:http://forest.blogbus.com 
 
  
 
 
 

注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里 ： 

Bolt.new

Bolt.new是一个免费的AI全栈开发工具

下载

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
overflow的visible属性只对IE起作用，auto/hidden可对FF、OP起作用。
  
  
    
  
        
overflow:auto;
  
        
overflow:auto;
  
        
overflow:auto;
  
        
overflow:auto;
  
        
overflow:auto;
  
        
overflow:auto;
  
    
  
  
  
    
  
        
overflow:hidden;
  
        
overflow:hidden;
  
        
overflow:hidden;
  
        
overflow:hidden;
  
        
overflow:hidden;
  
        
overflow:hidden;
  
    
  
  
  
    
  
        
overflow:visible;
  
        
overflow:visible;
  
        
overflow:visible;
  
        
overflow:visible;
  
        
overflow:visible;
  
        
overflow:visible;
  
    
  
  
  
    
  
        
no overflow
  
        
no overflow
  
        
no overflow
  
        
no overflow
  
        
no overflow
  
        
no overflow
  
    
  
  


  
  
  
    
@@##@@
  
    
  
      
Ghost Zhang
  
      
Email:lovej1bz@gmail.com
立即学习“前端免费学习笔记（深入）”；
  
      
QQ:22168741
  
      
ORG:WebReBuild.ORG www.CSSForest.ORG
  
      Blog:http://forest.blogbus.com 
  
  
  
  
  

这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。

css代码：

overflow   
{   
height:auto;   
_height:200px;   
min-height:200px;   
verflow:auto;   
zoom:1;   
_overflow:visible;   
}