父div高度自适应子div高度的两种方法

当子div使用了float之后，父级div就不能自适应子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>

实际效果如图：

目标效果图：

1、加上clear清除浮动

这个方法很简单，就是使用clear，设定div的左侧和右侧均不允许出现浮动元素。
<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; }

以上两种方法都比较有效，而且简单，更推荐第二种方法。