在编辑网页时当一个 未设置高度的 父级元素里面的内容全部浮动时，父级元素会出现高度塌陷的问题。
示例：未添加浮动时：（此时是一个父盒子套两个小盒子）
<style>
*{
padding: 0;
margin: 0;
}
.father{
background-color: aqua;
}
.son1{
width: 200px;
height: 200px;
background-color: cadetblue;
}
.son2{
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
</div>
</body>
此时父元素未添加高度
当我给子元素设置浮动
.son1,.son2{
float:left
}
这时可以看到父元素消失，当我们右键打开检查查看时
可以看到父元素还在但是无法显示。
造成这种现象的原因是：未设置高度的父元素其高度是靠里面的子元素撑开的，当子元素全部设置了浮动即全部脱离文档流，就相当于父元素内没有了元素，其高度自然也就塌陷了。
而这种问题的解决方式也很简单：
1、给父元素添加声明overflow：hidden
2、在浮动元素下方添加空div，并给元素声明 clear：both
4、父元素添加浮动
5、为父元素设置高度
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
