对于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准备的。
 
 
 
 
 
 
 
 
 
 
 
 
Overflow hack Demo|www.CSSForest.org 
 
 
_uacct = "UA-780254-5";urchinTracker(); 
 
/*<![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;} 
/*]]>*/ 
 
 

 
 
 
     
        1 
        2 
        3 
        4 
        5 
        6 
        7 
        8 
        9 
     
 
 
     
        1 
        2 
        3 
        4 
        5 
        6 
        7 
        8 
        9 
     
 


 
   
     
     
      Ghost Zhang 
      Email:lovej1bz@gmail.com 
      QQ:22168741 
      ORG:WebReBuild.ORG www.CSSForest.ORG 
      Blog:http://forest.blogbus.com  
   
 
 
 
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

            12下一页阅读全文