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

2015-04-25 21:57:21来源:威易网作者:icech
当子div使用了float之后,父级div就不能自适应子div的高度。其实有不少解决办法,最简单有效的有两种,这里icech介绍一下。
当子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; } 以上两种方法都比较有效,而且简单,更推荐第二种方法。
关键词:css

赞助商链接:

齐乐娱乐