The Power of Now

在上一篇：清除浮动 (上)中我们提到了两种清除浮动的方式：

• 方法一：直接在HTML中插入带有 clear 属性的标签
• 方法二：使用 :after 伪类和 content 属性，用CSS插入清除浮动的元素

后来有人发现了更简单的方式，仅仅使用 overflow 属性就可以。先看效果：

overflow 属性规定当内容溢出容器框时应该怎样。在默认情况下，内容会溢出到容器之外，进入相邻的空间。当 overflow 的属性值为 hidden 、auto 或 scroll 时有一个有用的副作用，就是它会自动清理包含的任何浮动元素。

overflow 这一副作用在大多数浏览器都有效，但是对于IE6、7我们仍需利用其 auto-enclosing（上一篇有介绍），即需要触发容器的hasLayout。（注意：overflow 在IE7中可以触发hasLayout，在IE6中不可以）

所以第三种清除浮动的方法如下：

.container {
    /*省略其它样式*/
	overflow: hidden; /*为什么不用auto?，见下面说明*/
	width: 100%; /*用于触发IE6下 hasLayout 。也可以使用其它可以触发hasLayout的属性*/
}

需要注意的是：

1. 对于opera浏览器则必须指定容器的width或者height。
2. 对于Mac上的IE浏览器则必须使用overflow:hidden ，因为overflow:auto 也会像overflow:scroll一样，总是产生滚动条。

但是这种方法也并不完美，先看效果：

我在内容里放置了一个相对定位的正方形，并试图将其定位到容器之外，结果它被切掉了一部分，因为该方法用到了overflow:hidden。 （当然，如果你的设计稿没有这种布局效果的话，那么是可以使用第三种方法的。）

再后来，有人改进了第二种清除浮动的方法，得到如下方法：

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;/*For IE 6/7 触发hasLayout*/
}

这种方法被称作micro clearfix，目前bootstrap 就采用这种方式清除浮动。

该方法使用content:" "代替了方法二中的content:"."，这样就没必要用height: 0 和visibility: hidden来隐藏生成的内容了（不仅减少了CSS代码量，而且避免了Opera一个奇特的bug）。同方法二相同，使用:after伪类插入内容用于清除浮动。与之不同的是，使用:before伪类并且将生成的内容display: table是为了防止 top-margin 折叠。这样做的好处以及top-margin 折叠问题我们留到下篇再说。

至此我们说完了清除浮动的四种方式，似乎我们彻底弄明白了如何清除浮动。其实不然，在下一篇我会介绍你所不知道的【清除浮动】。是不是在想：啊！还有不知道的呢？。。哈哈，也许这就是CSS的博大精深吧。

参考文章：

• http://www.quirksmode.org/css/clearing.html
• http://nicolasgallagher.com/micro-clearfix-hack/
• http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

题外话：

最近在看书的时候学到一句话和大家分享

” I hear and I forget , I see and I remember , I do and I understand”

还看啥呢？动手吧！O(∩_∩)O