CSS中浮动塌陷的解决办法及分析
下面，首先通过一个小案例来了解浮动元素对父级元素带来的影响（浮动塌陷）。
<div class="div1">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
/*css代码*/
.div1{
width: 300px;
margin: 0 auto;
border: 3px solid saddlebrown;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
float:left;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
结果图
现只给父级设置了宽度没有给高度，呈现出父级只显示边框线，子元素没有把父元素的高度撑起来，造成了浮动塌陷现象。
**分析：**由于浮动元素（三个div）脱离了文档流，所以会导致不占有父级元素的空间，会给父级元素带来影响（浮动塌陷）。
解决办法
1、设置父级高度和宽度：将上述案例的父级盒子给一个高度
.div1{
width: 300px;
height: 100px;
margin: 0 auto;
border: 3px solid saddlebrown;
}
效果图：
分析：这个办法要知道父级的精确宽高，对于项目开发代码比较的时候，并不能精确的知道父级的宽高，所以这个方法不适用。
2、父级浮动：给父元素的样式设置浮动属性
.div1{
width: 300px;
float: left;
margin: 0 auto;
border: 3px solid saddlebrown;
}
效果图：
分析：这样做虽然可以不用知道父级的宽高，但大家可以看到，父级浮动后它之前的水平居中效果就没有了，所以父级浮动的缺点是对后续的元素会有造成影响。
3、为父级添加overflow属性：在父级的样式中加入overflow:hidden或者overf:auto
.div1{
width: 300px;
overflow: hidden;
margin: 0 auto;
border: 3px solid saddlebrown;
}
.div1{
width: 300px;
overflow: auto;
margin: 0 auto;
border: 3px solid saddlebrown;
}
在其中的一个子div中加入较多的文字后
分析：以上效果可以看出，使用hidden值时当内容超出时，超出的部分会被隐藏。使用auto值时，有超出的部分会出现滚动条，这样就影响到了页面的布局。
4、在父元素中最后一个子元素的后面追加一个空元素，并给它一个clear:both;（清除浮动）
//HTML代码
<div class="div1">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
//css代码
.box4{
clear: both;
}
结果如下
分析：这个方法需要多加一个空元素，但相较于以上几种方法，是解决浮动塌陷最优的办法。
喜欢的可以下方一键三连支持下哦！！！