float 造成外部div 高度不适应解决办法

当一个区块内的元素被应用了float之后，可能会造成整个box的高度对就不以被浮动对象的高度为标准了..

 

---

解决办法1：

给box 加上overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决

<div id='box' style='overflow:auto; zoom:1;border:solid 1px red;'>

  <div id='inner' style='height:100px;float:left;'></div>

</div>

 

---

 解决办法2： 

在box的尾部添加一个额外的div 设定样式为 clear:both; 

 <div id='box' style='border:solid 1px red;'>

  <div id='inner' style='height:100px;float:left;'></div>

  <div  style='clear:both' /> 

</div>