酸奶情感

全部频道

您的当前位置：首页兼容性好的overflowCSS清除浮动一例_html/css

兼容性好的overflowCSS清除浮动一例_html/css

来源：酸奶情感


清除浮动似乎写css的都要用到，不过各大浏览器存在兼容性，这样我们这些CSSer们很头疼，为了一个清除浮动，甚至要写很多个代码来兼容。从实 践中摸索，找到一种简单的清除浮动的办法，不单使用简单，而且FF火狐、OPera、Chrome、IE8都支持，使用时只要为需要清浮动的标签加上 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代码部分如下：

02 
  • 1
    •  
  • 2
    •  
  • 3
    •  
  • 4
    •  
  • 5
    •  
  • 6
    •  
  • 7
    •  
  • 8
    •  
  • 9
    •  
  • 1
    •  
  • 2
    •  
  • 3
    •  
  • 4
    •  
  • 5
    •  
  • 6
    •  
  • 7
    •  
  • 8
    •  
  • 9
    •
    显示全文