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


答案：在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准备的。
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> 
<head> 
<meta http-equiv="pragma" content="no-cache" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="utf-8" /> 
<meta name="robots" content="all" /> 
<meta name="author" content="Ghost" /> 
<meta name="Copyright" content="CSSForest" /> 
<meta name="Description" content="CSSɭ" /> 
<meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" /> 
<title>Overflow hack Demo|www.CSSForest.org</title> 
<link rel="Shortcut Icon" href=> 
<script src="http://www.google-易做图ytics.com/urchin.js" type="text/javascript"></script> 
<script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script> 
<style type="text/css"> 
/*<![CDATA[*/ 
.copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;} 
.copyright a:link{color:#666666;text-decoration:none;} 
.copyright a:hover{color:#CC9900;text-decoration:underline;} 

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;} 
/*]]>*/ 
</style> 
</head> 

<body> 
<p></p> 
<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> 


<div class="copyright"> 
  <div class="vcard"> 
    <div class="logodiv"><img class="logo" src="/upload/20121014/blocked_logind5jkisaax2d.jpg" alt="LOGO" /></div> 
    <div class="info"> 
      <p class="fn n"><strong class="given-name">Ghost</strong> <strong class="family-name">Zhang</strong></p> 
      <p><strong>Email:</strong>lovej1bz@gmail.com</p> 
      <p class="qq"><strong>QQ:</strong>22168741</p> 
      <p class="org"><strong>ORG:</strong>WebReBuild.ORG www.CSSForest.ORG</p> 
      <strong>Blog:</strong>http://forest.blogbus.com </div> 
  </div> 
</div> 
</body> 
</html> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：使用CSS不用程序实现文字自动截断用省略号代替
下一个：又一实用的常用CSS缩写语法收集
更多图片编程知识: