本文共 583 字，大约阅读时间需要 1 分钟。

高度塌陷的解决方案

1. 发生原因：父元素不写高度完全由子元素撑起来的，但是子元素浮动时，父元素就会高度为0，造成了高度塌陷

2. 解决方法：

   • 给父元素添加声明overflow：hidden

     （优点：代码少、简单。缺点：只适用于高版本的浏览器，IE6不支持，不可以position定位配合使用，超过的会被隐藏） https://blog.csdn.net/qq_41638795/article/details/83304388

     【添加overflow：hidden来清除子元素的浮动】

   • 在浮动元素下方添加空div，并且给元素声明clear：both

     （优点：代码少，浏览器兼容好，只需要兼容 IE 浏览器，因为在IE兼容部分块元素会自带16px的高度，需要添加 height: 0;overflow: hidden; 缺点：需要添加多余的空标签并添加属性）

     【使用clear:both;清除了上面div设置的float: left;（浮动）】

​

- 万能清除法

​

- 父元素添加浮动（缺点：添加了新的浮动问题。不推荐使用）

​