对于IE7、FF、OP清除浮动的最优方法第1/2页

现在的位置: 首页 > 综合 > 正文

对于IE7、FF、OP清除浮动的最优方法第1/2页

2012年07月21日 ⁄ 综合 ⁄ 共 1216字 ⁄ 字号小中大 ⁄ 评论关闭

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