CSS 的浮动溢出问题

在 CSS 中，由于浮动元素不包含在正常的页面流中，所以如果父元素只有浮动子元素，浮动子元素将会脱离父元素，产生我们不想要的结果。例如（结果见这里）：

<div style="border:1px solid gray">
  <div style="float:left">Hello</div>
  <div style="float:right">World</div>
</div>

可以看到两个浮动的子元素并不会撑开父元素，而是跑到下边去了。

这个问题的解决方法有下面几种：

1. 父元素设置 overflow 为 hidden 或者 auto
2. 父元素设置 float 为 left 或者 right
3. 父元素设置 display 为 table
4. 添加空白 div 或者 br 并设置为 clear: both
5. 添加 :after 伪元素并设置 content: '' ''; display: table; clear: both

这些方法也许有其它影响，详情可以参考后面的资料。另外 IE6 和 IE7 中还需要设置 zoom:1 以触发 hasLayout。

参考资料：
[1] CSS - Clearing floats
[2] mezzoblue - Clearance
[3] A new micro clearfix hack - Nicolas Gallagher
[4] 浮动元素容器的clearing问题 - 阮一峰的网络日志
[5] 那些年我们一起清除过的浮动-层叠之美