清除浮动的方法

1、问题场景

界面布局：

    外部div包含两个内部div，外部id为container，内部id为first和second。

   #container：width：auto;height:auto;

   #first和#second均包含样式float：left。

出现页面异常：#container 高度不能随内部div（first和second）撑开。高度为0（当设定了边框border的px值后则高度仅仅为边框的高度。）；

出现异常的原因：float导致#frist和#second的div脱离页面标准流显示，#cotnainer下的标准流中不包含任何内容。故无法被撑开。

2、清除浮动的三种方法：(更多参见下面张鑫旭链接)

2.1 精确计算container应该的高度，然后设定对应固定高度。#container: height:**px;

2.2 给#container 中添加一个#third 的div。设定class="clear:both"; 实现清除浮动。

2.3 给#container div添加样式 overflow:hidden。

详细资料：http://www.divcss5.com/jiqiao/j406.shtml (非常感谢分享)

 后来看了下张鑫旭的文章，发觉还有更多种方法可以实现(包括在外部div加上display:inline-block,或者float:left;或者position:absolute,或者zoom:1等)，具体链接：http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/(第三部分:包裹与清除浮动。感谢分享).

2.4 解决异常后的样子