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

web前端|css教程 css对于IE7、FF、OP清除浮动的最优方法

清除浮动

web前端-css教程

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

浏览器源码,vscode后端接口存放位置,ubuntu触控板失灵,tomcat布置静态页面,c爬虫制作,php中文变量名,黄石计算机seo推广价格,html个人网站设计模板lzw

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

php应用源码下载,vscode无法找到文件,ubuntu cp 参数,tomcat8 超时,sqlite数据表怎么创建,爬虫饲养箱造景捕鸟蛛,php自动分页,三河seo网络,国际论坛网站模板,简易购物网站前端模板lzw

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

源码2017云盘下载,vscode下载插件错误,ubuntu盘符绑定,tomcat 日志生产环境,sqlite数据库可视化,像针眼那么大的小爬虫怎么处理,郑州 php 招聘,青海seo优化费用,精品个人网站源码下载,html界面布局框架模板下载lzw

其中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

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

                        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;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;}  /*]]>*/        overflow的visible属性只对IE起作用，auto/hidden可对FF、OP起作用。
                  overflow:auto;
          overflow:auto;
          overflow:auto;
          overflow:auto;
          overflow:auto;
          overflow:auto;
      
  
                  overflow:hidden;
          overflow:hidden;
          overflow:hidden;
          overflow:hidden;
          overflow:hidden;
          overflow:hidden;
      
  
                  overflow:visible;
          overflow:visible;
          overflow:visible;
          overflow:visible;
          overflow:visible;
          overflow:visible;
      
  
                  no overflow
          no overflow
          no overflow
          no overflow
          no overflow
          no overflow
      
  
            
              Ghost Zhang
        Email:lovej1bz@gmail.com
        QQ:22168741
        ORG:WebReBuild.ORG www.CSSForest.ORG
        Blog:http://forest.blogbus.com

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

css代码：

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

清除浮动