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

来源：互联网 2024-10-11 23:47:59

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

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

其中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" /> <ｓｃｒｉｐｔ src="http://www.google-analytics.com/urchin.js" type="text/javascript"></ｓｃｒｉｐｔ> <ｓｃｒｉｐｔ type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</ｓｃｒｉｐｔ> <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> <p>     <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> </p> <p>     <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> </p> <p>   <p>     <p>@@##@@</p>     <p>       <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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</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> </p>   </p> </p> </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" />  <ｓｃｒｉｐｔ src="http://www.google-analytics.com/urchin.js" type="text/javascript"></ｓｃｒｉｐｔ>  <ｓｃｒｉｐｔ type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</ｓｃｒｉｐｔ>  <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>  <p>      <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>  </p>  <p>      <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>  </p>  <p>      <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>  </p>  <p>      <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>  </p>  <p>    <p>      <p>@@##@@</p>      <p>        <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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</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> </p>    </p>  </p>  </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;   }

op.ff

本文地址：http://www.wztg.net/wenda/69313.html

免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）