当前位置：Gxlcms > css > css对于IE7、FF、OP清除浮动的最优方法

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

时间：2021-07-01 10:21:17 帮助过：64人阅读

在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。

方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。
css代码

  1. ul {
  2. list-style: none;
  3. height: auto;
  4. margin: 0;
  5. p adding: 0;
  6. background-color: #436973;
  7. }
  8. li {
  9. float: left;
  10. width: 80px;
  11. height: 80px;
  12. background-color: #83B1DF;
  13. }
  14. .demo {
  15. clear: both;
  16. border: 1px solid #FF00FF;
  17. margin-bottom: 5px;
  18. }
  19. .overflow {
  20. overflow: auto;
  21. zoom: 1;
  22. background-color: #43FF73;
  23. }
  24. ul {
  25. list-style: none;
  26. height: auto;
  27. margin: 0;
  28. padding: 0;
  29. background-color: #436973;
  30. }
  31. li {
  32. float: left;
  33. width: 80px;
  34. height: 80px;
  35. background-color: #83B1DF;
  36. }
  37. .demo {
  38. clear: both;
  39. border: 1px solid #FF00FF;
  40. margin-bottom: 5px;
  41. }
  42. .overflow {
  43. overflow: auto;
  44. zoom: 1;
  45. background-color: #43FF73;
  46. }

HTML代码 

  1. <div class="demo">
  2. <ul class="overflow">
  3. <li>1</li>
  4. <li>2</li>
  5. <li>3</li>
  6. <li>4</li>
  7. <li>5</li>
  8. <li>6</li>
  9. <li>7</li>
  10. <li>8</li>
  11. <li>9</li>
  12. </ul>
  13. </div>
  14. <div class="demo">
  15. <ul>
  16. <li>1</li>
  17. <li>2</li>
  18. <li>3</li>
  19. <li>4</li>
  20. <li>5</li>
  21. <li>6</li>
  22. <li>7</li>
  23. <li>8</li>
  24. <li>9</li>
  25. </ul>
  26. </div>

其中zoom是为了IE6准备的。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 
  4. <head> 
  5. <meta http-equiv="pragma" content="no-cache" /> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  7. <meta http-equiv="Content-Language" content="utf-8" /> 
  8. <meta name="robots" content="all" /> 
  9. <meta name="author" content="Ghost" /> 
  10. <meta name="Copyright" content="CSSForest" /> 
  11. <meta name="Description" content="CSSɭ" /> 
  12. <meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" /> 
  13. <title>Overflow hack Demo|www.CSSForest.org</title> 
  14. <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" /> 
  15. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> 
  16. <script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script> 
  17. <style type="text/css"> 
  18. /*<![CDATA[*/ 
  19. .copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;} 
  20. .copyright a:link{color:#666666;text-decoration:none;} 
  21. .copyright a:hover{color:#CC9900;text-decoration:underline;} 
  22. ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;} 
  23. li{float:left;width:80px;height:80px;background-color:#83B1DF;} 
  24. .demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;} 
  25. .overflow{overflow:auto;zoom:1;background-color:#43FF73;} 
  26. /*]]>*/ 
  27. </style> 
  28. </head> 
  29. <body> 
  30. <p></p> 
  31. <div> 
  32.     <ul> 
  33.         <li>1</li> 
  34.         <li>2</li> 
  35.         <li>3</li> 
  36.         <li>4</li> 
  37.         <li>5</li> 
  38.         <li>6</li> 
  39.         <li>7</li> 
  40.         <li>8</li> 
  41.         <li>9</li> 
  42.     </ul> 
  43. </div> 
  44. <div> 
  45.     <ul> 
  46.         <li>1</li> 
  47.         <li>2</li> 
  48.         <li>3</li> 
  49.         <li>4</li> 
  50.         <li>5</li> 
  51.         <li>6</li> 
  52.         <li>7</li> 
  53.         <li>8</li> 
  54.         <li>9</li> 
  55.     </ul> 
  56. </div> 
  57. <div> 
  58.   <div> 
  59.     <div><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div> 
  60.     <div> 
  61.       <p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p> 
  62.       <p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p> 
  63.       <p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p> 
  64.       <p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p> 
  65.       <strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div> 
  66.   </div> 
  67. </div> 
  68. </body> 
  69. </html>

注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里 ： 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">  
  4. <head>  
  5. <meta http-equiv="pragma" content="no-cache" />  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7. <meta http-equiv="Content-Language" content="utf-8" />  
  8. <meta name="robots" content="all" />  
  9. <meta name="author" content="Ghost" />  
  10. <meta name="Copyright" content="CSSForest" />  
  11. <meta name="Description" content="CSSɭ" />  
  12. <meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" />  
  13. <title>Overflow hack Demo|www.CSSForest.org</title>  
  14. <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />  
  15. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>  
  16. <script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script>  
  17. <style type="text/css">  
  18. /*<![CDATA[*/  
  19. .copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;}  
  20. .copyright a:link{color:#666666;text-decoration:none;}  
  21. .copyright a:hover{color:#CC9900;text-decoration:underline;}  
  22. ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}  
  23. li{float:left;height:80px;margin-right:2px;padding:0 10px;background-color:#83B1DF;line-height:80px;}  
  24. .demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}  
  25. .overflow{overflow:auto;zoom:1;background-color:#43FF73;}  
  26. .overflow1{overflow:hidden;zoom:1;background-color:#43FF73;}  
  27. .overflow2{overflow:visible;zoom:1;background-color:#43FF73;}  
  28. /*]]>*/  
  29. </style>  
  30. </head>  
  31. <body>  
  32. <p>overflow的visible属性只对IE起作用，auto/hidden可对FF、OP起作用。</p>  
  33. <div>  
  34.     <ul>  
  35.         <li>overflow:auto;</li>  
  36.         <li>overflow:auto;</li>  
  37.         <li>overflow:auto;</li>  
  38.         <li>overflow:auto;</li>  
  39.         <li>overflow:auto;</li>  
  40.         <li>overflow:auto;</li>  
  41.     </ul>  
  42. </div>  
  43. <div>  
  44.     <ul>  
  45.         <li>overflow:hidden;</li>  
  46.         <li>overflow:hidden;</li>  
  47.         <li>overflow:hidden;</li>  
  48.         <li>overflow:hidden;</li>  
  49.         <li>overflow:hidden;</li>  
  50.         <li>overflow:hidden;</li>  
  51.     </ul>  
  52. </div>  
  53. <div>  
  54.     <ul>  
  55.         <li>overflow:visible;</li>  
  56.         <li>overflow:visible;</li>  
  57.         <li>overflow:visible;</li>  
  58.         <li>overflow:visible;</li>  
  59.         <li>overflow:visible;</li>  
  60.         <li>overflow:visible;</li>  
  61.     </ul>  
  62. </div>  
  63. <div>  
  64.     <ul>  
  65.         <li>no overflow</li>  
  66.         <li>no overflow</li>  
  67.         <li>no overflow</li>  
  68.         <li>no overflow</li>  
  69.         <li>no overflow</li>  
  70.         <li>no overflow</li>  
  71.     </ul>  
  72. </div>  
  73. <div>  
  74.   <div>  
  75.     <div><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div>  
  76.     <div>  
  77.       <p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p>  
  78.       <p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p>  
  79.       <p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p>  
  80.       <p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p>  
  81.       <strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div>  
  82.   </div>  
  83. </div>  
  84. </body>  
  85. </html>

这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。

css代码：

  1. overflow   
  2. {   
  3. height:auto;   
  4. _height:200px;   
  5. min-height:200px;   
  6. verflow:auto;   
  7. zoom:1;   
  8. _overflow:visible;   
  9. }

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！