闭合浮动元素

old9 楼主

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

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

复制代码

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

[ 本帖最后由 blankzheng 于 2007-3-27 19:06 编辑 ]

shaoqian

只单单在需要闭合的元素里面加上一个 display:table; 可以吗？兼容性如何？

old9 楼主

display:table ie不认啊

shaoqian

我使用display:table的原因是在ff下，外面父元素的div的背景色无法根据里面的内容延伸。所以使用了display:table。
在ie里面不闭合也是好的。

手指凉冰冰

最好是给几个例子来说明这几种不同的方法!

forestgan

原帖由 手指凉冰冰 于 2006-7-17 17:40 发表
最好是给几个例子来说明这几种不同的方法!

以前写过几个例子:
使用:display: table
http://www.forest53.com/tutorial ... ?sortid=1&id=40

使用:after
http://www.forest53.com/tutorial ... ?sortid=1&id=37

额外加个DIV
http://my.opera.com/forestgan/


overflow那个方法在IE5.0下可能会有点问题.

ellvend

谢谢楼主，我开始表格 一直文字列很长但是边框却包不到，很是郁闷，看了这篇文章才发现自己用了float，原来还需要 闭合浮动元素的...

caixfm

给外部的DIV设一个高度就可以解决这一问题~~~

.divOut{
             background:#eee;
             height:1%;
           }

但不知兼容性如何,在IE下没有问题;

lscn

楼上的，  height:1%;这个在FF下不支持。

目前我用的大部分还是父元素使用float属性

Elfnina

我都用clear.....

coolfeng

今天用这个属性测试了一下 效果不错。

1.         display:block!important;
   
2.         display:inline-block;
   
3.         overflow:hidden!important;
   
4.         overflow:auto;

复制代码

Sandyluo

我就觉得第一种方法的兼容性最好，但麻烦的是多一个无谓的空标签．我有时就干脆把父极元素也浮动了．

pattra

灵活运用
我一般是考虑顺序

overflow —— 父容器float —— 加clear

sohe99

眼看就要成为一篇好文章，前面是里里外外说了一大通，却在最后最关键的地方没戏了。
“（这两个 display 要先后放在两个 CSS 声明中才有效果）” 鬼看得明白这个注释讲的什么意思，到底是一个放在父div，一个放在子div，还是搞两个父div嵌套，总之我试了n的n次方次，都没成。楼主要能去掉前面的长篇大论，省下那么几秒在这里写个小例子或者再加句话说的明白点到底该怎么放，那该多好？

yarak

原帖由 sohe99 于 2008-7-3 14:25 发表
眼看就要成为一篇好文章，前面是里里外外说了一大通，却在最后最关键的地方没戏了。
“（这两个 display 要先后放在两个 CSS 声明中才有效果）” 鬼看得明白这个注释讲的什么意思，到底是一个放在父div，一个放在子 ...

是对同一个CSS的两次声明,跟你DIV没有关系.应用的话DIV应该是同级的.
我是这么理解的.

4769946

原帖由 yarak 于 2008-10-22 09:41 发表



是对同一个CSS的两次声明,跟你DIV没有关系.应用的话DIV应该是同级的.
我是这么理解的.

意思是对浮动的DIV使用两次display就能将其闭合吗？

sheva1982

六楼的朋友太不厚道了，贴出来的网址不相干不说，尽是这些东西，破坏精神文明建设啊！

DIV嵌套的多了，确实产生了很多问题，最好能列举两个例子来说明一下！

lzq12101

说两点：第一，楼主的文章太晦涩。第二，六楼的.......

wangyasen

其它最好的办法我感觉如果浮动就都加上float:left;要么就不用

mycggo

overflow:hidden在什么样的情况下会出现问题？???