Div高度自适应

父div高度随子div高度改变而改变

  1.如果父div不定义height、子div均为标准流的时候（没有使用float），父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。

    如：

    <style type="text/css">
    #parent{border:#000 solid 5px} 
    #child_a{border:#f00 solid 5px;} 
    #child_b{border:#0f0 solid 5px} 
   </style>
    <div id="parent">父div容器 
       <div id="child_a">子div容器</div>
       <div id="child_b">子div容器</div>
    </div>

IE下效果： FF下效果：

2.、如果父div定义height,子div均为标准流的时候（没有使用float），，在IE下父div的height随内容变化而变化，ff中则固定大小，如父div(parent)设置height:40px;

  IE6下效果：   FF下效果：

3.如果子div使用了float属性，此时已经脱离标准流，父div不会随内容的高度变化而变化，解决的办法是在浮动的div下面，加一个空div，设置clear属性both

  <style type="text/css">
    #parent{border:#000 solid 5px;} 
    #child_a{border:#f00 solid 5px; float:left;} 
    #child_b{border:#0f0 solid 5px;float:left;} 
   </style>
    <div id="parent">父div容器 
      <div id="child_a">子div容器</div>
      <div id="child_b">子div容器</div> 
    </div>

FF下效果： IE下效果：

修改后：

    <style type="text/css">
    #parent{border:#000 solid 5px;} 
    #child_a{border:#f00 solid 5px; float:left;} 
    #child_b{border:#0f0 solid 5px;float:left;} 
   </style>
    <div id="parent">父div容器 
      <div id="child_a">子div容器</div>
      <div id="child_b">子div容器</div>
      <div style="clear:both;"></div>
    </div>

IE下： FF下：