父div高度自適應(yīng)子div高度的兩種方法

當(dāng)子div使用了float之后，父級div就不能自適應(yīng)子div的高度。其實有不少解決辦法，最簡單有效的有兩種，這里icech介紹一下。

代碼如下：
<style>
.mydiv{ background:#EEE;}
.mydiv-fl{ float:left: width:300px; height:500px;}
.mydiv-fr{ float:right; width:300px; height:500px;}
</style>
<div class="mydiv">
   <div class="mydiv-fl"></div>
   <div class="mydiv-fr"></div>
</div>

實際效果如圖：

目標(biāo)效果圖：

1、加上clear清除浮動

這個方法很簡單，就是使用clear，設(shè)定div的左側(cè)和右側(cè)均不允許出現(xiàn)浮動元素。
<div class="mydiv">
   <div class="mydiv-fl"></div>
   <div class="mydiv-fr"></div>
   <div style="clear:both"></div>
</div>

2、使用overflow:hidden

就是在父div增加一個屬性，變成

.mydiv{ background:#EEE; overflow:hidden; }

以上兩種方法都比較有效，而且簡單，更推薦第二種方法。