|
|||
![]() | |||
您现在的位置: Photoshop资源站 >> 设计学院 >> 网站设计 >> DivCSS教程 >> 正文 |
|
|||||
| Div+CSS教程:如何闭合浮动元素? | |||||
作者:佚名 教程来源:onegreen.org 点击数: 更新时间:2008-6-20 ![]() |
|||||
|
有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢。 后来又有了一种新的方式,使用 :after 伪类动态的嵌入一个用于清除浮动的元素,这种方法和上一种原理一样,不同的只是把这个额外的内容用 CSS 生成,但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证 html 比较干净,所以用得还是比较多的。 再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素,IE自然又是不支持的,所以这种方法和上一种方法一样都对 IE 做了不同处理(具体就是触发layout),不同的就是overflow 没有 :after 伪类那么麻烦了,缺点也有,overflow 可能会产生一些小冲突。 在使用 overflow 之前还有过一种使用 float 的方法,就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。使用 float 虽然在 IE 和标准兼容浏览器中都能闭合浮动元素,但原理却是不同的,IE/Win 中 float 触发了 layout 因而闭合了浮动,而在标准兼容浏览器中,float 其实和上一种方法中的 overflow 原理一样,产生了一个“块级格式化范围”——这是CSS 规范中提到的一种现象,它往往具有某种独立性,特性之一就是会自动闭合内部的浮动元素。 按照规范,以下类型的元素会产生一个块级格式化范围:
所以,原来在标准兼容浏览器中我们也可以有这么多的方法闭合一个浮动元素,而且只需要 CSS,无需其他。顺带说一下以上除了overflow,其余都有一个附加效果就是自动收缩父容器宽度。
以上来看 IE 中闭合浮动元素的方法也不少,自然也都有其局限性,要么有附带效果,要么使用的是非标准属性(无法通过验证)。
所以要跨浏览器闭合浮动元素,可以选择的方式还是很多的,如何搭配使用这些 CSS 属性就要具体情况具体分析了,灵活应用条件注释也很有必要,要是实在不行我们回过头来还有 clear 可以用嘛。 |
|||||
| 教程录入:onegreen 责任编辑:onegreen | |||||
| 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 | |||||
| | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | SiteMap(软件) | SiteMap(文章) | SiteMap(图片) | | |
| Powered by:onegreen.org 站长:onegreen〖粤ICP备06090975号〗 |
|