css清除浮动的最优方法
作者:Ghost 来源:css森林 时间:2008-04-25 22:33:00
在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准备的。
演示:完整的Demo
注:忘了一个很重要的内容,并不是所有的overflow属性都可起来一样的效果,比如visible属性就只能对IE起作用。例子可以看这里Demo2
这样的话就有一个问题啦,如果要有高度,而且内容超出高度的时候,定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案:对于IE6及以下版本的IE,可以直接定义高度;对于IE7、FF、OP,可定义min-height。
CSS代码
overflow
{
height:auto;
_height:200px;
min-height:200px;
verflow:auto;
zoom:1;
_overflow:visible;
}
标签:浮动,overflow,css
0
投稿
猜你喜欢
查询字符串中包含特殊字符的问题
2009-01-09 13:13:00
sql server 触发器实例代码
2012-01-05 19:09:28
Web 设计:实现干净代码的12条定律
2008-12-04 13:27:00
base href 使用方法详解
2008-05-18 13:27:00
向外扩展SQL Server 实现更高扩展性
2008-12-18 14:45:00
Mootools 1.2教程(10)——Fx.Tween的使用
2008-12-02 18:03:00
Javascript Closures (1)
2009-03-18 12:14:00
动态加载JavaScript的小实践
2009-11-12 12:38:00
IE6 iframe 横向滚动条问题
2009-01-18 13:31:00
ASP获取刚插入记录的自动编号ID
2008-11-17 20:41:00
Dreamweaver4探谜系列(2)
2010-05-13 12:08:00
SQL Server服务器内存升级后的烦恼
2008-12-22 10:55:00
跨平台、多浏览器页面测试
2008-06-24 11:54:00
Scripting.Dictionary 对象
2007-10-13 09:46:00
如何利用SQL Server来发送电子发邮件?
2010-01-01 15:37:00
人性化网页设计技巧
2007-10-15 13:02:00
MySQL中SQL的单字节注入与宽字节注入
2009-03-25 14:49:00
msxml3.dll (0x80070005)拒绝访问 解决方法
2010-03-11 21:26:00
FCKeditor编辑器基本配置优化修改使用方法
2008-12-31 13:32:00
解析CSS列表样式属性list-style
2009-03-26 13:16:00