DIV高度自动延长

div标签如下

<div id="box">

<div id="left"></div>

<div id="right"></div>

<div id="clear"></div>

</div>

css样式设置如下

#box { margin:0  auto; float:left;}

#left,#right { width:300px height:100px;float:left;}}

.clear{height:0;clear:both;line-height:0;font-size:0;overflow:hidden;}  这里清除浮动是关键

前面的盒子浮动,在最下面重新放一个div盒子(bottom),这个盒子什么都不用放,只是用来占用空间,高度可以设置成1px;宽度跟容纳它的盒子相同就行了,不用给它设置浮动,这样这个div盒子不会浮动始终在最下面,最大的那个盒子(box)就会根据它不断的往下延伸.