1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

CSS教程:闭合CSS浮动元素的几种方法

作者:用户 来源:互联网 时间:2016-02-12 09:02:34

浏览器方法容器浮动元素闭合

CSS教程:闭合CSS浮动元素的几种方法 - 摘要: 本文讲的是CSS教程:闭合CSS浮动元素的几种方法,   按照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 的方法:

.gainlayout{display:inline-block;}
.gainlayout{display:block;}

.Com

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



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索浏览器 , 方法 , 容器 , 浮动 , 元素 闭合 ,以便于您获取更多的相关知识。

css-CSS中的清除浮动到底是什么意思?

...ar 属性定义了元素的哪边上不允许出现浮动元素详细使用教程参考:http://www.w3school.com.cn/cssref/pr_class_float.asp此外这里有一个不错的博客详细展示了这个属性的不同效果,可以参考:http://www.zhangxinxu.com/wordpress/2014/06/understand-css-cle...

总结网页制作中闭合浮动元素的几个方法

...在标准化的范围里,当元素被赋予以下几种属性,就可以闭合浮动元素。 1. float浮动元素,left 或者 right 都可以。 2. position:relative 绝对定位的元素。 3. display:inline-block(inline-block对象显示为内嵌元素,但所有子对象都显示为块元...

那些年我们一起清除过的浮动

...秘,让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,...

总结前端面试过程中最容易出现的问题

...侧自适应,你是如何做到的。 方法很多,一般是margin和浮动,具体可以网上查一下。很简单。 二、html5新的标签和特性有哪些。 html5标签有很多,你可以网上查一下。 三、你常用的css3有哪些。说出你记得的。 哈哈哈,这个...

清除浮动技巧总结

...度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。正是因为浮动的这种特性,导致本属于普通流中的元素浮动之...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备