css對於IE7、FF、OP清除浮動的最優方法-css教學-PHP中文網

在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"> 
<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="/favicon.ico" type="image/x-icon" /> 
<script src="http://www.m.sbmmt.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> 
    <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> 
    <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> 
  <div> 
    <div><img src="http://img68.imageshack.us/img68/8708/mycss對於IE7、FF、OP清除浮動的最優方法9we.gif" alt="css對於IE7、FF、OP清除浮動的最優方法" /></div> 
    <div> 
      <p class="fn n"><strong>ghost</strong> <strong>zhang</strong></p> 
      <p><strong>email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p> 
      <p><strong>qq:</strong><a href="tencent://message/?uin=22168741&site=webrebuild.org&menu=yes">22168741</a></p> 
      <p><strong>org:</strong><a href="http://www.webrebuild.org">webrebuild.org</a> <a href="http://www.cssforest.org/">www.cssforest.org</a></p> 
      <strong>blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div> 
  </div> 
</div> 
</body> 
</html>

登入後複製

註：忘了一個很重要的內容，並不是所有的overflow屬性都可起來一樣的效果，例如visible屬性就只能對ie起作用。例子可以看這裡：

<?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">  
<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="/favicon.ico" type="image/x-icon" />  
<script src="http://www.m.sbmmt.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;height:80px;margin-right:2px;padding:0 10px;background-color:#83b1df;line-height:80px;}  
.demo{clear:both;border:1px solid #ff00ff;margin-bottom:5px;}  
.overflow{overflow:auto;zoom:1;background-color:#43ff73;}  
.overflow1{overflow:hidden;zoom:1;background-color:#43ff73;}  
.overflow2{overflow:visible;zoom:1;background-color:#43ff73;}  
/*]]>*/  
</style>  
</head>  

<body>  
<p>overflow的visible属性只对ie起作用，auto/hidden可对ff、op起作用。</p>  
<div>  
    <ul>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
    </ul>  
</div>  
<div>  
    <ul>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
    </ul>  
</div>  
<div>  
    <ul>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
    </ul>  
</div>  
<div>  
    <ul>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
    </ul>  
</div>  


<div>  
  <div>  
    <div><img src="http://img68.imageshack.us/img68/8708/mycss對於IE7、FF、OP清除浮動的最優方法9we.gif" alt="css對於IE7、FF、OP清除浮動的最優方法" /></div>  
    <div>  
      <p class="fn n"><strong>ghost</strong> <strong>zhang</strong></p>  
      <p><strong>email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p>  
      <p><strong>qq:</strong><a href="tencent://message/?uin=22168741&site=webrebuild.org&menu=yes">22168741</a></p>  
      <p><strong>org:</strong><a href="http://www.webrebuild.org">webrebuild.org</a> <a href="http://www.cssforest.org/">www.cssforest.org</a></p>  
      <strong>blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div>  
  </div>  
</div>  
</body>  
</html>

登入後複製

這樣的話就有一個問題啦，如果要有高度，而且內容超出高度的時候，定義auto或hidden都可能會有一些不想要的效果出現。這裡提供一個解決方案：對於ie6以下版本的ie，可以直接定義高度；對於ie7、ff、op，可定義min-height。

css代碼：

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

登入後複製