游戏梦网
当前位置:IT学院 >> 网页制作 >> CSS >> 正文

网页CSS技巧:闭合浮动元素超级简单的方法

中关村商情网  2007-7-4  责编:夏天  字体:
  

  关于闭合浮动元素(clearing float)的方法现在已经很多了,你还不了解的话去old9的blog看看,有一篇闭合浮动元素。

这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。

原理是这样的,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见。见W3C的解释:
In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

现在只要将给外围元素添加一个overflow:auto;就可以解决问题,结果是除了IE,真的可以解决。下来就要解决ie的问题了,再加上_height:1%; ,这个问题就完全解决了。

下面是我做的三个例子作为比较

XHTML:

<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>


CSS:

#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

【作者:佚名】 【来源:中关村商情网】
评论】【 】【去论坛看看】【收藏】【打印】【关闭】【回到顶部

我来说两句

优惠活动:买笔记本、台式机、服务器,拨打电话010-68400280/68400215,享受惊喜特价!

论坛·美图

相关链接
IT学院 最新文章

HD Tune硬盘软件

服务器负载均衡

Oracle数据库

ASP加密和解密
·Mac OS X下应用程序的安装与卸载
·成为系统专家的必修课
·X系统不能启动故障排除的DIY完全手册
·认识苹果电脑的必备常识
·苹果操作系统精选教程1
·苹果操作系统精选教程2
·苹果操作系统精选教程3
·苹果操作系统精选教程4
·苹果操作系统精选教程5
·苹果操作系统精选教程6
·苹果操作系统精选教程7
·MAC系统的一些常识
·APPLE Mac osx (提速 / 修改键盘设置 
·APPLE 全功略 (一)
·APPLE Mac OSX工具软件下载
·在PC上本地安装Macl OS X x86
·MAC X86 硬件支持列表
·xp 与osx 双启动
·在PC上安装Mac OSX x86
·Mac OSX建立分区和格式化分区
IT学院 热点文章

关于CZN | 用户注册 | 友情链接 | 内容合作 | 广告服务 | 免责条款 | 工作机会 | 我要投稿 | 产品评测 | 联系CZN | 网站地图 | 设为首页 | 加入收藏
服务热线:010-68400280 EMAIL: 您若发现页面中有任何错误或侵犯您的版权,请及时与我们联系
Copyright© 2005-2008 Czn.Com.Cn All Rights Reserved 京ICP证05009081号