解决CSS高度塌陷-优快云博客

本文链接：https://blog.youkuaiyun.com/Wait_Myself/article/details/104599296

本文详细解析了CSS中常见的高度塌陷问题，介绍了三种解决高度塌陷的方法：使用overflow:hidden;，添加clear:both;的空白div，以及使用万能清除法。每种方法的原理及可能存在的缺点也被逐一说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高度塌陷:简单来说，就是包含含有浮动的元素的上一级的高度变为0了，下面的元素会上去
高度塌陷出现的场景：当没有给父元素设置高度的时候，并且子元素有浮动的情况下，父元素会出现高度塌陷。

解决方案：
第1种：给高度塌陷的元素添加属性 overflow:hidden;
原理：因为 overflow:hidden;能够触发BFC（块级格式化上下文、独立的渲染区）。因为BFC的其中一个特性为：计算BFC的高度时，浮动元素也参与计算。所以父元素计算高度的时候包括了浮动的子元素。也就是说浮动的子元素能够撑开父元素。
但是此方法也存在缺点：它会自动隐藏掉定位在元素外边的内容。

第2种：给浮动元素下方添加同级空白div，并且设置div的样式clear:both;
原理：clear:both;这个属性能忽略掉上方元素因为浮动而预留下的空间。
缺点：添加大量空的元素，会造成代码的冗余，影响网页的加载速度。

第3种：万能清除法（个人习惯叫法）
添加一个class选择符（类选择器）。这个类名可以根据自己的喜好祟拜你命名。
.clear-fix:after{
content:"";
display:block;
height:0;
clear:both:
overflow:hidden;
visibility:hidden;
}
这种方法不会在页面上添加无意义标签，从而使得页面的结构更为完整，因此建议使用此方法（万能清除法）。