版权声明：本文为博主原创文章，喜欢的话，可以通知我后进行转载哦！ https://blog.csdn.net/maidu_xbd/article/details/89527229
若父元素没有设置高度，其子元素设置浮动后会，子元素占用空间被释放，导致父元素高度塌陷。
解决方法：
(1)浮动元素后添加<div class="clear"></div>添加清除浮动样式
.clear{
clear:both
}
<body>
<div id="div">
<div id="div1"></div>
<div id="div2"></div>
<div class="clear"></div>
<!--浮动元素后添加<div class=”clear”></div>添加清除浮动样式 -->
</div>
</body>
<style>
#div {
width: 400px;
background: #ccc;
}
#div1 {
width: 100px;
height: 100px;
background: green;
float: left;
}
#div2 {
width: 100px;
height: 100px;
background: red;
float: right;
}
.clear {
clear: both
}
</style>(2)为父元素添加样式after,
#div::after {
content: "";
display: block;
clear: both
}(3)为父元素添加样式
overflow:hidden;
(4)手动为父元素添加高度。