闭合浮动元素让CSS代码更规范

互联网   发布时间:2008-10-17 19:28:36   作者:佚名   我要评论
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容

按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢?
有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(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规范中提到的一种现象,它往往具有某种独立性,特性之一就是会自动闭合内部的浮动元素。
按照规范,以下类型的元素会产生一个块级格式化范围:
浮动元素,left或者right皆可。
绝对定位的元素。
inline-block元素,不过这个gecko目前不支持。
table-cell类型元素,其实table,table-head-group,table-row什么的也都可以,还有inline-table(gecko不支持)也同样,因为他们都会间接产生一个匿名的table-cell。
overflow取值非visible的元素。
所以,原来在标准兼容浏览器中我们也可以有这么多的方法闭合一个浮动元素,而且只需要CSS,无需其他。顺带说一下以上除了overflow,其余都有一个附加效果就是自动收缩父容器宽度。
而对于IE/Win,它有一套自己的体系,就是layout,具有layout的元素会自动闭合浮动元素,再来看看触发layout的CSS属性,会发现和上面的块级格式化范围有很多类似之处: 浮动元素
绝对定位元素
display:inline-block
zoom
width/height
overflow/overflow-x/overflow-y[IE7新增]
max/min-width/height[IE7新增]
以上来看IE中闭合浮动元素的方法也不少,自然也都有其局限性,要么有附带效果,要么使用的是非标准属性(无法通过验证)。
还要提一点的是display:inline-block,这个属性对IE而言本身没什么用,实际效果只是给一个元素暗地添加了layout,但是标准兼容浏览器是认得这个属性的,所以要不影响这些浏览器,需要将display设回默认。这里IE有一个bug,如果先定义了display:inline-block,然后再将display设回block(这两个display要先后放在两个CSS声明中才有效果),那么layout不会消失,同时也不会影响其他浏览器,所以目前来说,这也算一个不错的触发layout的方法:
Example Source Code
.gainlayout{display:inline-block;}
.gainlayout{display:block;}
所以要跨浏览器闭合浮动元素,可以选择的方式还是很多的,如何搭配使用这些CSS属性就要具体情况具体分析了,灵活应用条件注释也很有必要,要是实在不行我们回过头来还有clear可以用嘛。

相关文章

  • CSS代码书写规范究极指南

    这里为大家送上一份CSS代码书写规范究极指南,包括代码注释和命名规范以及空格缩进等一应俱全,都来自大家平时的约定俗成,绝对值得学习借鉴,需要的朋友可以参考下
    2016-05-27
  • 编写灵活、稳定、高质量的HTML和css代码规范指南

    这篇文章主要介绍了编写灵活、稳定、高质量的HTML和css代码规范指南,如何书写规范的html以及css代码,大家可以参考下文进行学习
    2016-03-10
  • 全面总结CSS代码的编写规范及优化建议

    这篇文章主要介绍了全面总结CSS代码的编写规范及优化建议,从最基本的代码块格式到模块化再到性能优化,整理得相当详细,十分推荐!需要的朋友可以参考下
    2016-02-23
  • css代码缩写 div+css布局代码简写规范

    采用css缩写div+css布局代码,你会发现很简洁很好看也是对网页布局者的一个比较高的要求吧,接下来为网页爱好者详细介绍下,css样式中常用的缩写语法,感性的朋有可以参考
    2013-03-22
  • 19楼论坛的前端CSS代码规范介绍

    19UED前端CSS代码规范 V1.0.
    2012-06-13
  • 让样式表CSS代码更加专业规范

    网页制作Webjx文章简介:Eric Meyer Reset和YUI Reset都是非常强大的,但是对于我而言,它们走的太远了。我觉得你最终需要重置一切,然后重新定义所有元素的属性。这就是为
    2009-04-02
  • 分享20条编写 CSS 代码的建议

    本文是脚本之家小编给大家分享的20条书写CSS代码的建议,感兴趣的朋友一起看看吧
    2018-06-08

最新评论