Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素浮动引起父级容器高度塌陷的4种解决方案</title>
</head>
<body>
<style>
.box1{
border:5px dashed red;
/*方案1，给父级容器添加高度*/
/*height:200px;*/
/*方案2，给父级容器添加溢出隐藏属性*/
/*overflow:hidden;
z-index: 99; !* 兼容老版本*!*/
/*方案3，，给父级容器添加伪类*/
}
/* .box1:after{
!*方案3，，给父级容器添加伪类，兼容性最好的 ,推荐方案*!
content:'';!* 默认添加的是行内元素*!
display:block; !*要设置成块元素*!
clear:both; !*清除两边的浮动影响*!
} */
.box2{
width:100%;
height:200px;
background-color:lightgreen;
float:left; /*box2的父元素box1折叠起来了，子元素浮动引起父级容器高度塌陷*/
}
</style>
<div class="box1">
<div class="box2"></div>
<!--/*方案4，清除两边的浮动来撑开父级容器*/-->
<!--不推荐,因为后端进行数据绑定时会遇到麻烦:例如循环输出数据,需要对它单独处理-->
<!--<div style="clear:both;"></div>-->
<div style="clear:both;"></div>
</div>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
