最近编写一个页面的时候遇见一个问题，外部div是block的，而内部元素是float的，大家应该都知道float的元素是没有实际高度的，就算你设置了float元素的高度他也不会撑开外部block元素的高度，一般情况我们可以对这个block定义一个高度进行解决，但是某些情况下，我们不一定知道外部block元素的实际高度，我们就需要让block进行高度自动适应，下面提供2中解决方案：
假设下面的代码中ul是block而li是float的
<ul class="list"> <li>这是一个测试</li> <li>这是一个测试</li> <li>这是一个测试</li> <li>这是一个测试</li> </ul>
一、用jq代码控制（不推荐）优点是肯定所有的浏览器都能兼容，但是如果网络不太好的情况下加载半天都加载不完jq的时候你那个页面会显示错乱。
二、我们可以用伪类after来解决这个问题，
<style type="text/css"> .list:after{content"";display:block;clear:both;} </style>
当然我们也可以直接在li最后添加一个<div style="clear:both;"></div>也可以解决这个问题，这里也不是很推荐。ie6和ie7不支持这个伪类after,我们可以用hack对这两个浏览器私有的zoom属性，让div远离浮动塌陷问题，代码如下：
.list{ *zoom:1; }
html 关于内部是float元素的外部div高度为0的解决方法！
原文：http://www.cnblogs.com/plants/p/4882361.html