使用overflow清理浮动(Float)

浮动的元素在文档流里是不占空间的，例如：

<style type="text/css">

  #left, #right { float: left; }

</style>

<div id="container">

  <div id='"left">left</div>

  <div id='"right">right</div>

</div>

在上述代码中，因为id为"left", "right"两个div元素是浮动的，并且没有被清理掉，因此这两个元素在文档流里是不占空间的，通过firebug我们可以看到id为"container"的div元素的高度是0（大家可以通过给container元素设置背景色来查看container元素的大小，这里因为它的高度是0，所以你会发现这里的设置的背景色没起作用），这是因为它的两个字元素是浮动的，不占文档流，相当于container元素没有字元素，所以它的高度就为0了。

说了这么多，大家应该能够猜到清理浮动的目的了，其实就是给浮动的元素分配空间，但保留它的浮动效果。最常见的清理方法是在浮动的元素后面加上一个空白元素：

<style type="text/css">

  #left, #right { float: left; }

  .clear { clear: both; }

</style>

<div id="container">

  <div id='"left">left</div>

  <div id='"right">right</div>

  <div class="clear"></div>

</div>

这种方法能很好地清理掉浮动，而且几乎可以在任何浏览器里正常工作，但是唯一的缺点就是要加一条无意义（从(X)HTML语义上来说）的空白元素。而且在有些特定的场合，例如CMS系统里，系统生成的代码我们不可以直接修改或修改比较麻烦（JS修改的方法除外），这时我们可以使用overflow来清理浮动。

当然了，overflow本来的目的不是为了清理浮动，上面的代码改成overflow后如下：

<style type="text/css">

  #container { overflow: auto; }

  #left, #right { float: left; }

</style>

<div id="container">

  <div id='"left">left</div>

  <div id='"right">right</div>

  <div class="clear"></div>

</div>

overflow的值可以是hidden, auto, scroll, 具体用哪一个值取决于你对内容溢出的处理方法，例如，如果把内容溢出的部分隐藏，则可以使用overflow: hidden。 上面的方法可以在Firefox, Chrome, IE7,IE8等浏览器里正常工作，除了IE6，如果要在IE6里正常工作，必须给container元素显示的设定它的宽度或高度，例如#container { overflow: auto; width: 100%; }, #container { overflow: auto;  width: 100px;}, #container { overflow: auto; height: 100%; } #container { overflow: auto;  height: 100px}等，具体取决于container元素的具体的宽、高度的要求，如果没有要求可以使用#container { overflow: auto; width: 100%; }，因为这样对container元素的宽度实际上是没有影响的。

Overflow能够清理浮动的本质是它触发了元素的BFC(IE6和IE7是hasLayout)，BFC的特性之一就是会清理子元素的浮动，触发BFC的方法有很多，但是相对来说overflow:hidden语句带来的副作用是最小的。

其实之所以要在IE6里面设定宽度或高度才起作用，因为设定宽度或高度会触发IE的hasLayout属性，具体参见： CSS BFC和IE Haslayout介绍

参考：http://www.quirksmode.org/css/clearing.html