作者：Dudo
原文连接：http://www.dudo.org/article.asp?id=239
很多人都有研究闭合浮动元素的问题，但是解决方法却不一样，也并不是每一种方法都尽善尽美。闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题，因此，这里我想总结一下目前经常用到的几种方法，并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。 问题的提出：
最简单的一种情形就是我们把一个小的、固定宽度的div元素（比如导航、引用等）和其他元素内容一起包含在一个大的div中。比如下面这段代码：

我们可以为“#inner”设定一个宽度值（比如说20%），但是由于div是块级元素，即使我们设定了宽度，其后面的内容也只能在下一行中显示，除非我们给它设定一个浮动属性（无论是向左浮动或者向右浮动）。那么此时会产生我们上面提到的问题了。
如果“#inner”的宽度和高度都比“#outer”小，这不会有问题。
但是，如果“#inner”的高度超过了“#outer”，那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后，它就会脱离的文本流，无论其宽度和高度怎么变化都不会使“#outer”跟随变化。
例一：未清除浮动时的布局表现

 [Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
在这个例子中，最开始由于“#inner”的高度小于“#outer”所以不会有问题，但是当你点击“加长”后你会发现“#inner”的底边已经超出了“#outer”的范围，而“#outer”没有发生改变。这就是我们所提到的“清除浮动（闭合浮动元素）”或者是“闭合浮动”问题 解决办法：
1）额外标签法
第一个，也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签，典型的做法就是使用类似


或者使用

 [Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
P.S. 我发现在Internet Explorer中（无论是6还是7）
可以清除浮动，但是不能闭合浮动元素，在Firefox中就没有这个问题，不知道是什么原因？！
2）使用after伪类
使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容：

但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用，所以我们还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中，最常用就是Holly招数。Holly招数的原理是这样的，CSS代码
/* 这段代码只有IE/Win可以看见 \*/
CSS 规则
/* 结束Hack */
上面的代码中有两行注释，其中第一行结束时出现了反斜杠（\），在Mac的Internet Explorer中会认为注释并没有结束，于是继续向下直到第一个完事的“*/”出现，这中间的所有字符都被当作是注释，而IE/Win却也只会把第一行和第三行看作是注释，中间的为有效代码。所以这样就区分出来了不同平台上的IE了。
正是基于以上原理，在windows的IE 6上的清理浮动，可以使用如下代码：

例三：使用:after伪类清理浮动