增加CSS的overflow属性来清除浮动
日期:2008年1月15日 作者: 查看:[大字体 中字体 小字体]-
这个方法不单使用简单,而且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代码overflow
{
height:auto;
_height:200px;
min-height:200px;
verflow:auto;
zoom:1;
_overflow:visible;
}(出处:http://www.hackhome.com/)
- 1
-
- 增加CSS的overflow属性来清除浮动 相关文章:
- ·QQ空间开场动画免费拿的方法
- ·非主流QQFlash模块和动态横幅
- ·黑鹰行动军刀部队-完整攻略 - 游戏攻略
- ·用移动硬盘来安装Vista系统
- ·劳动法相关小案例:病假工资如何计算?
- ·Flash制作非常逼真的下雪视觉动画效果
- ·U盘启动电脑,USB移动硬盘启动电脑,USB外置光驱启动电脑
- ·如何制作启动光盘
- ·用Msconfig设置XP启动项
- ·Flash:闪动的星星
- 增加CSS的overflow属性来清除浮动 相关软件
- ·万能显卡驱动
- ·万能声卡驱动
- ·动物园大亨2:非洲冒险
- ·《最终幻想12》超清晰CG动画
- ·万能摄像头驱动
- ·万能网卡驱动
- ·宫崎骏动画音乐合集
- ·CS1.6 零点行动
- ·霓虹灯动画制作软件 V5.50
- ·QQ搞笑表情gif动态图片集 V1.0 最新版
- 特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作
- 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转
- 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源:http://www.hackhome.com
精品推荐
热点TOP10
- ·DIV+CSS布局入门实例教程
- ·创建一个纯CSS的水平导航条
- ·设计一个基于CSS的网页模板
- ·Javascript+CSS横向三级导航菜单
- ·站长推荐:53个CSS-不可或缺的技巧
- ·如何使用CSS来进行网页排版
- ·CSS文本:word-wrap
- ·网页设计基础:Div+CSS布局入门教程
- ·彻底弄懂CSS盒子模式(DIV布局快速入门)
- ·CSS中的滑动门技术
- ·DIV CSS网页布局导航菜单源代码(17)
- ·使用CSS处理表格边框样式化
- ·CSS文本:text-overflow
- ·DW MX 2004 CSS 属性详解
- ·总结:用CSS进行网页样式设计攻略全集
- ·如何用css设置网页字体
- ·小技巧:div+css高度自适应
- ·如何用CSS定义表格与模拟表格
- ·使用纯 CSS 设计3D按钮
- ·深入了解CSS的继承性及其应用
特别推荐
- ·彻底弄懂CSS盒子模式(DIV布局快速入门)
- ·CSS样式设计之CSS滤镜资料小结
- ·总结:用CSS进行网页样式设计攻略全集
- ·创建一个纯CSS的水平导航条
- ·如何用css设置网页字体
- ·CSS中的滑动门技术
- ·Javascript+CSS横向三级导航菜单
- ·CSS文本:word-wrap
- ·用CSS进行网页样式设计攻略全集
- ·用CSS实现的固定表头的HTML表格
- ·CSS属性列表
- ·如何使用CSS来进行网页排版
- ·使用纯 CSS 设计3D按钮
- ·纯CSS制作简洁的垂直导航
- ·网页设计基础:Div+CSS布局入门教程
- ·CSS 制作的三级菜单特效代码
- ·设计一个基于CSS的网页模板
- ·如何用CSS定义表格与模拟表格
- ·用CSS制作的美国国旗
- ·DW MX 2004 CSS 属性详解
