CSS高度塌陷的8种方法以及优缺点

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