CSS高度塌陷的8种方法以及优缺点
高度塌陷的触发条件:父元素没有设置高度,且所有的子元素都浮动之后,因为子元素悬空不占位的,所以父元素的高度为0,会影响到后面的标签,也会影响页面布局。高度塌陷的解决方法有很多种,以下是跟大家整理的8中解决方法,以及优缺点,有需要的自取。
1.父级div定义 height
<style type="text/css">
.div1{
background:#000080;border:1px solid red;/*解决代码*/height:200px;}
.div2{
background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{
float:left;width:20%;height:200px;background:#DDD}
.right{
float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
2.结尾处加空div标签 clear:both;
<style type="text/css">
.div1{
background:#000080;border:1px solid red}
.div2{
background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{
float:left;width:20%;height:200px;background:#DDD}
.right{
float:right;width:30%;height:80px;background