跳过导航,朗读正文21CN首页

新闻 | 财经 | 汽车 | 房产 | 体育 | 娱乐 | 数码 | 生活 | 女人 | 游戏 | 旅游 | 社区 | 邮件 | VGO | 播客 | 影院

  当前位置:21CN首页 > IT频道 > 软件频道 > 正文  
 
增加CSS的overflow属性来清除浮动
2008-01-15 09:54:03  21CN IT频道  【 浏览字号:
精彩回顾 手机 | 数码 | 笔记本 | 家电 | 下载
·诺基亚触摸屏S60第五版5800初接触 ·谷歌金山词霸 V1.8 最新版QQ2008下载
·08超值家用DC新品盘点 “免费”杀毒软件下载 ·佳能5DMark2第3方样片 史上最强网络黑客盘点
·令你匪夷所思的手机新技术 笔记本采购防骗指南 ·五款极速液晶电视推荐 玩转鼠标拖放操作
搜索更多 CSS 的资讯 >>>

这个方法不单使用简单,而且FF、OP、IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了。

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

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




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




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


其中zoom是为了IE6准备的。

注:忘了一个很重要的内容,并不是所有的overflow属性都可起来一样的效果,比如visible属性就只能对IE起作用。这样的话就有一个问题啦,如果要有高度,而且内容超出高度的时候,定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案:对于IE6及以下版本的IE,可以直接定义高度;对于IE7、FF、OP,可定义min-height。


CSS代码 Webjx.Com

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

来源:网页教学网

(编辑:充姬娅)
相关新闻: CSS 搜索其他
- 调整CSS类型的顺序改变链接翻滚  2007-12-24 23:27:27
- CSS布局实例:上中下三行,中间自适应  2007-12-21 09:40:09
- 利用CSS的Clip属性来创造多彩文字  2007-12-12 09:14:30
- CSS:word-wrap同word-break的区别  2007-12-12 09:12:58
- 巧妙运用CSS样式表立刻改变鼠标的样式  2007-12-06 10:55:53
21CNIT最终页推荐
今日热点
手机 数码 家电 软件下载
意想不到的概念笔记本 点兵热门酷睿双核电脑 三大芯片巨头围攻英特尔
下一篇:巧妙的化解分布式拒绝服务攻击(DDoS)
热门电影排行
六壮士
救命
少年阿虎
决一死战 | 网络迷情 | 别碰寡妇 | 杀人曲
| 法本无情 | 左轮右你 | 警局奇案 | 我最棒
 点播更多    

热门剧集排行
夜郎王
凭什么爱你
铁血莲花
黄河浪 | 王保长歪传 | 天使在线 | 红色档案
肥姐挂帅 | 欢乐家庭 | 大姐 | 冲出绝境
 点播更多    
 
 
公司简介  |  广告服务  |  网站导航  |  合作伙伴  |  诚征代理  |  联系我们