在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代码

<div class="demo">  
<ul class="overflow">  
<li>1</li>  
<li>2</li>  
<li>3</li>  
<li>4</li>  
<li>5</li>  
<li>6</li>  
<li>7</li>  
<li>8</li>  
<li>9</li>  
</ul>  
</div>  
<div class="demo">  
<ul>  
<li>1</li>  
<li>2</li>  
<li>3</li>  
<li>4</li>  
<li>5</li>  
<li>6</li>  
<li>7</li>  
<li>8</li>  
<li>9</li>  
</ul>  
</div> 

其中zoom是为了IE6准备的。
Overflow hack Demo|www.CSSForest.org 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
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]