css清除浮动的最优方法
作者:Ghost 来源:css森林 发布时间:2008-04-25 22:33:00
标签:浮动,overflow,css
在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;
}
0
投稿
猜你喜欢
- <% class menusPublic Title, ID, Image, TitleColor, Target, Backgrou
- 在修改后的 《闲谈 Web 图片服务器》 一文中也提及了"IE 浏览器的连接数问题",这也是个有趣的话题。值得补充记录一
- 1.创建数据库连接,并打开set cnn=Server.CreateObject("ADODB.Connection&q
- 朋友去面试。对方问他:说说你之前做的那个站,有什么地方好的?朋友就说:用户体验比别的站好。对方又问:你怎么知道用户体验比别的好?朋友于是又磕
- 看着这个题目可能大家会有点陌生,不知道是什么,说的直白一点,RDFa就是让你的页面更好的被机器所理解,而不简简单单是展示你的页面,下面就关于
- 在 asp 应用中,经常用到 Session 对象来保存用户临时私有数据,而 asp 的 Session 对象是依赖于浏览器的 Cookie
- 1. 什么是404404是一个 http 错误代码,即请求的网页不存在。代码404的第一个“4”代表客户端的错误,如错误的网页位址;后两的数
- 代码如下: <% '屏蔽主流的下载工具 Dimxurl,xtool '获取浏览器AGENT xurl=lcase(Re
- 每个进行过较大型的ASP-Web应用程序设计的开发人员大概都有如下的经历:ASP代码与页面HTML混淆难分,业务逻辑与显示方式绞合,使得代码
- 一、Sql Server中的日期与时间函数 1. 当前系统日期、时间 select getdate() 2. dateadd 在向指定日期加
- 处理页面中的间歇无缝滚动新闻的时候,最常见的方法就是将滚动区内容复制追加一份,然后通过控制和判断滚动块的scrollTop来实现滚动停止效果
- Bit-Packed Data TypesMySQL有一些存储类型使用一个值中的一些单个的比特位来紧凑的存储数据。纯技术上将,不管是底层的存
- MySQL分区方便了我们的使用,但是MySQL分区究竟能做些什么,MySQL分区有没有什么限制呢?阅读下文,您就能找到答案。MySQL分区能
- 终于能出来透口气,写点东西了。前段太忙,也很郁闷,现在调整过来点了。我的设计原则就是在满足需求的前提下,尽可能的简化,简化,再简化。有一次跟
- 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗的解决方法分享。<div id='tes
- 如何在页面中对不同的数据进行相同的处理?selectId.asp' 列出所有客户的客户名称<html><
- 一、定位 oracle分两大块,一块是开发,一块是管理。开发主要是写写存储过程、触发器什么的,还有就是用Oracle的Develop工具做f
- <% If Err.Number <> 0 Th
- W3C发布了WCAG 2.0提案(Web Content Accessibility Guidelines 网页内容无障碍指南),大概为了实
- 在我转到wordpress之后第一个考虑的是它的数据库备份恢复问题,因为写bloger都知道,自己的blog记录的都是自己需要的宝贵的资料和