DIV + CSS布局的方法现在很流行，但我们在使用CSS定位DIV的时候，如果给div设置了float值之后，我们将发现，父容器的高度塌陷了，根本就获取不到子容器的高度。这就意味着如果浮动的div只是布局中的一小块区域，并且内容可能超过容器的时候，我们的父容器不会检测到，并扩充区域大小以适应内容。页面将在这种情况下错乱不堪。
为了解决这种问题，我们经常做的可能就是法器：overflow:hidden;width:xxpx;height:xxpx;来解决。超出内容，自求多福吧，反正我是不然你出来搅乱布局。可是，仅仅这样，我们还是不能解决所有问题，如果确实需要自适应的时候，怎么办？ —— 只能Table了吗？
答案自然是否定的，在div+Css盛行的当下，无数牛人已经为此找到了多种的解决方法，下面就逐一介绍：
1. 最简单，最有效的方法，给HTML代码加点料：
就是在父容器的添加一个子容器，该子容器位于父容器中子容器列表的最后。并且给该子容器添加一个样式：clear:both;。就这么简单，你就可以让你的父容器自适应浮动子容器的高度了。
原始HTML:
<div id="header">
这里是头部内容
</div>
<div id="container">
<div id="sub_container" style="float:left">
... 这里是内容，很长很长的内容...
</div>
</div>
<div id="footer">
尾部内容
</div>
上面的代码可以测试下，页面是不是错乱不堪？那试试下面的代码呢？
<div id="header">
这里是头部内容
</div>
<div id="container">
<div id="sub_container" style="float:left">
... 这里是内容，很长很长的内容...
</div>
<div style="clear:both;"></div>
</div>
<div id="footer">
尾部内容
</div>
是不是解决了问题呢？
这种方法是W3C推荐使用的解决浮动带来父容器高度塌陷的问题的方法。当然，代码中的div你也是可以替换成其他的标签的，比如：<br>。<br>本身是换行，在这里，它更符合HTML中的语义。
这种方法自然也是有他的缺陷的，就是你要在需要的时候，加上那么一点点代码。在有的时候，你可能更希望保留HTML代码的原始内容。即然这样，我们就试试其他方法吧。
2. 使用after伪类：
这种方法需要你了解伪类这个玩意儿，不清楚？那Sorry，自学下吧，实在不想学，Copy之~。方法的本质和第一种差不多，就是用伪类来给父容器添加一点内容并设置clear:both;代码如下：
#container:after{
content:" ",
height:0;
clear:both;
visibility:hidden;
display:block;
}
这里用content设置内容为空格，当然，你也可以设置一个小点(.)，只要不是很明显，就可以。这样就不用修改HTML代码，达到了一样的效果，哦不，是类似的效果。毕竟还是有不同的，这个方法在浏览器的兼容方面表现比较一般，如果你决定用，可能需要对浏览器进行必要的hack.
这个还是麻烦，那能不能不要弄这么麻烦的呢？自然也是有的，那我们看看下面这个方法会不会简单些。
3. 父容器CSS添加overflow特性：
这个方法简单，就是在父容器的css定义中添加overflow:hidden或者overflow:auto就可以解决问题了，简单吗？当然，不过你还需要做些擦屁股的工作，由于overflow会影响页面内容的现实方式，可能会导致页面的显示会有那么一些些问题，而且遗憾的是这种显示问题与浏览器本身有关，因此，你需要多多调试，以策万全。
#container{overflow:auto;zoom:1;}
这里需要注意的是zoom:1;，加这个的意图是为了兼容我们神一样的IE6（纠结啊，国内IE6到现在都还有23%左右的份额）。网上有一说是这个zoom:1;可以用height:1%;代替，没有尝试过，有机会你试试，反正我用第一种方法.=.=!
4. 让父容器和子容器一起飞翔：
这个方法很强大，利用了浮动元素本身会闭合浮动元素，这种方法据说在IE中表现良好。不过，有多少个父容器真的想和子容器一起飞翔呢？再说了，如果父容器飘了，子容器再飘，要是还有子容器要飘，，，不管怎么说，我是受不了。
#container{float:left;}
这个飘的次数少些，可以接受下，毕竟是利用CSS的特性来处理，算是有些技巧的。在实际中，也许你会用下面这种方法：
5.给个高度钉死你
在子容器内容固定的时候，这个方法比较简单有效，快速的而不用思考，在多层次背景的应用效果不错。
#container{height:50px;}
上面已经给出了一般的处理方法，在实际的应用中，我们可能还会使用其他的一些技巧来处理这种问题。问题是死的，人是活的嘛。