码迷,mamicode.com
首页 > Web开发 > 详细

【css基础】div父元素根据子元素高度自适应高度

时间:2016-04-24 15:31:33      阅读:302      评论:0      收藏:0      [点我收藏+]

标签:

两种情况(无特殊说明子元素都是指代父元素的第一级子元素)

第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题.
第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为0,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子!

解决这个问题的根源就是清除浮动

1 , 给父节点增加样式overflow:hidden或者overflow:auto
2 , 在子元素中的最后一个添加一个兄弟节点,当然该节点应该是一个空节点.你可以用div或者br
<div style="clear:both"></div>
<!--或者-->
<br clear="all" />

 

参考资料: 
那些年我们一起清除过的浮动 
对overflow与zoom”清除浮动”的一些认识

【css基础】div父元素根据子元素高度自适应高度

标签:

原文地址:http://www.cnblogs.com/dongguapifly/p/5427019.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!