中资源
中国设计秀设计资源站
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
广州网站设计 维美网站建设 域名注册 虚拟主机 广州网站建设 广州网页设计 虚拟主机 域名注册 素材下载 广告服务 中国品牌形象设计 网站推广 家具中国
求创科技
中国设计秀
中国福网
金视觉
中国设计秀欢迎你
中国品牌形象设计网
中国设计秀
当前位置:网络学院首页 >> 设计教程 >> web标准 >> CSS技巧:子元素浮动后父容器的闭合

CSS技巧:子元素浮动后父容器的闭合

来源:中国设计秀    作者:佚名    点击:459     加入收藏
关键字:技巧 容器 WEB标准
中资源
 最近两个月断断续续做了好几个网站的美工,做的过程中对DIV+Css的标准开发有了进一步的了解。有两点收获最大,一是彻底弄懂了CSS的盒子模式(Box Model),再一个就是搞定了困扰我很久的“闭合浮动元素”的问题:

  一般说来如果某个子元素使用了浮动(float),那父元素总是不能确切地知道子元素是在什么位置结束的,所以父元素的下边框总是从子元素的中间甚至是顶部穿过,看起来很不舒服。

  最早时我都是在子元素结束后单独加个<br />或<div></div>将其属性设置为“clear:all;”,但这样一来就需要生成不少没用的空标签,甚至有些网站需要修改ASP代码以自动添加这些空标签,只能算是下策。

  后来发现当父标签也设置为浮动(float)时就可以在正确的位置闭合了,所以就把父容易也浮动起来,这样一来很多ASP代码就不需要改了,遇到需要添加含Clear属性的空标签时如果不能从模板中添加,而需要从ASP代码中添加时,就不需要改ASP代码了,只需要把父容器设为浮动,如果还需要改ASP,那就再把父容器的父容器设为浮动,一层层地浮动上去,总能解决问题的。这虽然能省不少事,但很容易造成整个页面中全是浮动元素,-_-!!! 也只能算是中策而已。

  再后来,在网上搜索别的东西时偶然发现有人说只要在父容器的CSS属性中加上以下两个属性就可以搞定了:
overflow: auto;
_height: 1%;

  试了一下,果然好用,这么一来,这在目前应该算是解决这一问题的上策了:不需要对页面做任务修改,也基本上不需要对父容器--甚至是父容器的父容器做什么改动,只给父容器添加两个无所谓的属性就搞定了。

  现在我一直在用这两个属性来闭合浮动元素,实在是太方便了~
0
顶一下
2008-02-29 15:42:06    出处:中国设计秀cnwebshow.com
关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口