★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

CSS教程:弄懂闭合浮动元素

网络 2008/6/29 20:45:46 深山行者 字体:  浏览 4421 我要评论

按照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的方法:

  .gainlayout{display:inline-block;}

  .gainlayout{display:block;}

  所以要跨浏览器闭合浮动元素,可以选择的方式还是很多的,如何搭配使用这些CSS属性就要具体情况具体分析了,灵活应用条件注释也很有必要,要是实在不行我们回过头来还有clear可以用嘛。

相关阅读
( 2012/11/20 18:14:15 )在未知图片的宽度与高度时利用div+css将图片居中
( 2011/7/16 8:56:21 )做在线客服时,聊天窗口的div滚动条始终在底部
( 2011/1/27 15:56:13 )javascript编写的网页版的打字测试程序
( 2011/1/27 9:09:51 )JS+CSS实现图片放大预览效果(购物时放在产品上面预览图片)
( 2010/7/7 14:30:14 )2010滚动条样式大全最新收集
( 2010/7/6 10:43:51 )非常不错的支持各种浏览器的简易调色板
( 2010/7/4 16:55:59 )非常酷的javascript实现万年历功能
( 2010/7/2 13:05:11 )div+css黑色焦点图(幻灯片效果非常 不错)
共有0条关于《CSS教程:弄懂闭合浮动元素》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
用css做的英文首字母大写和英文全都大写通过各个浏览器
css优先级的例子
让DIV固定在浏览器窗口的底部(兼容IE6)
MarkMan 马克鳗,让设计更有爱 (超级给力的页面标注工具)
IE8 CSS HACK 兼容
更多>>最新添加文章
sql server中前缀为PK、UK、DF、CK、FK表的意思
网站从http改成https(ssl证书)后设置301跳转将http跳转到https的方法
ASP利用fso读取文件夹里所有文件的名字
jquery动态生成的html代码中无法使用jquery事件的解决方法
asp实现获得当前文章的上一篇信息与下一篇信息功能及代码
asp导出内容到excel表并自定义命名后下载(非打开)
'禁止站外提交页面和数据
asp将中文汉字字符转为unicode编码(\u编码)与把unicode编码转为汉字
更多>>随机抽取信息
网站需要SEO,基本的SEO建站要点
一个可以用来思考的故事,非常不错
rs操作数据表记录集对象的方法
CSS设计网页头部的优化写法
asp正则表达式详细
asp随机显示字符长度与类型(可随机显示数字、小写字母、大写字母,可以做为随机密码使用)
CSS完美兼容IE6/IE7/FF的通用方法
本站出现验证码问题