html 关于内部是float元素的外部div高度为0的解决方法！

最近编写一个页面的时候遇见一个问题，外部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:;
}

三、（这个是2015年的日志记录了当时遇见的坑，今天回过头来看的时候发现在后面的学习中有其他方法解决特此记录）直接加入overflow:hidden 超出隐藏float的元素就会自动有高度

<style type="text/css">
.select{overflow:hidden}
<style>