闭合浮动元素

按照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 可以用嘛。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏水击三千

浅谈JavaScript的事件(事件对象)

  在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作...

2296
来自专栏极客编程

React快速入门

React是Facebook开源的一个用于构建用户界面的Javascript库,已经 应用于Facebook及旗下Instagram。

1001
来自专栏小狼的世界

Silverlight学习笔记:改变控件的样式

Silverlight的控件都具有MS为我们赋予的默认样式,虽然这个样式也不怎么难看,但任何产品都很少用这个默认的样式去做最后的呈现,所以我们就需要对其进行修改...

651
来自专栏前端侠2.0

文本过长后,显示省略号。ff特有的hack方法。

看了这篇文章,http://www.w3cplus.com/content/css3-text-overflow

841
来自专栏JetpropelledSnake

Vue学习笔记之Vue组件

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

581
来自专栏对角另一面

读Zepto源码之fx_methods模块

fx 模块提供了 animate 动画方法,fx_methods 利用 animate 方法,提供一些常用的动画方法。所以 fx_methods 模块依赖于 f...

1990
来自专栏一“技”之长

AppleWatch开发入门九——Watch帧动画的实现

        动画一直是iOS系统的一大亮点,CoreAnimation和粒子效果的支持,开发者可以很容易的做出效果炫酷的动画特效。在watchOS中,由于性...

722
来自专栏每日一篇技术文章

weex-26-dom模块

我们经常会看到上图所示的需求,当我们将列表向下滑动一段时间后,想要立刻回到顶部,这个时候就要用到本节所示的功能。

1103
来自专栏九彩拼盘的叨叨叨

常用布局 @mixin

本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

622
来自专栏张善友的专栏

jQuery操作Select

jQuery是如何控制和操作select的。先看下面的html代码 <select id="test"> <option value="1">选项一<optio...

1977

扫码关注云+社区