html中关于区块高度自增长实现

这个问题还是折腾了一段时间，其实正常情况下，一般的浏览器，只要不设置高度，里面增加内容之后都会自动增长，但是一旦设置了如float:left这种左浮动，内容填充产生的自增长就直接失效，导致整个页面的区块完全凌乱，一开始还真是没想到什么好办法，后来虽然得到解决，可老是会忘记，所以干脆整理成文档吧。

例如我定义如下div，并设置内容：

<div id="book">
  <ul>
    <li>小说列表</li>
    <li>小说列表</li>
    <li>小说列表</li>
    <li>小说列表</li>
  <ul>
</div>

实现id为book的区块，高度自增长的css代码就是：

height:auto;
overflow:hidden;
zoom:1;

挺简单的，但是我容易忘，也是很尴尬。上面的css代码中，overflow规定当内容超出元素框时的事件定义，它的值hidden表示内容会被修剪，并且其余内容是不可见的。而zoom的用法在于，引用csdn 博客用户small dragon的博文：当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。