版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lyl614976970/article/details/71706677
常常在并排div的时候使用到float属性，但是使用之后会发现他们的父元素会没有高度，之后的元素会“挤上来”，造成“塌陷”。
比如，我们想要的如下效果：
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.father-div{
background-color: #000000;
}
.items{
margin: 10px;
float: left;
height: 100px;
background-color: #FF0000;
}
.next-div{
background-color: #0099FF;
height: 100px;
}
</style>
<body>
<div class="father-div">
<div class="items">第一个</div>
<div class="items">第二个</div>
<div class="items">第三个</div>
</div>
<div class="next-div">next-div</div>
</body>
</html>却发现实际运行效果是这样的：
可以看到，father-div本应该包裹三个items，但是它的高度却消失了。
出现这种情况的时候，我们可以通过如下几种方法来解决：
-
在father-div里加入height属性，该方法适用于子元素高度已知并且固定的情况。
-
在最后一个子元素后加入<div style="clear:both;"></div>，清除浮动元素。
-
在father-div里加入overflow:hidden属性。
这里推荐后两种方法。