页脚压缩是因浮动子元素脱离文档流导致父容器高度塌陷，后续元素错位。解决方法包括使用clearfix伪类、overflow:hidden触发BFC或改用Flex/Grid布局，推荐优先采用现代布局方案以避免此类问题。
页脚被压缩或内容重叠，通常是因为父元素没有包含浮动子元素的高度。CSS 中的浮动（float）会让元素脱离正常文档流，导致父容器无法正确计算高度，从而影响布局，尤其是页脚位置错乱。解决这个问题需要清除浮动（clear float）。
为什么会出现页脚压缩？
当一个容器内的子元素使用了 float: left 或 float: right，而父容器未清除浮动时，父容器会“塌陷”——高度变为0或不完整，后续元素（如页脚）就会向上移动，覆盖前面的内容。
清除浮动的常用方法
以下是几种可靠且广泛使用的清除浮动方式：
● 使用伪类 ::after 清除浮动（推荐）给浮动容器添加一个清除浮动的伪元素，这是最常见也最干净的做法。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.clearfix::after {
content: "";
display: block;
clear: both;
}
将这个类应用到包含浮动元素的父容器上：
<div class="container clearfix"> <div style="float: left;">左侧内容</div> <div style="float: right;">右侧内容</div> </div> <footer>页脚内容</footer>● 给父容器设置 overflow: hidden
通过触发 BFC（块级格式化上下文），让父容器包含浮动元素。
.container {
overflow: hidden;
}
优点是写法简单，但注意：如果子元素有超出容器的部分（如弹出菜单），可能会被裁剪。
● 添加额外的清除元素（不推荐）在浮动元素末尾添加一个空元素并清除浮动：
<div style="clear: both;"></div>
这种方法破坏 HTML 结构，不利于维护，建议避免。
现代布局替代方案
如果项目允许使用较新的 CSS 特性，可以考虑用更现代的方式替代浮动布局：
-
Flexbox：用
display: flex布局，天然不产生浮动问题 - CSS Grid：适用于复杂页面结构，无需清除浮动
例如使用 Flex：
.container {
display: flex;
}
这样子元素不会脱离文档流，父容器自动包裹内容，页脚自然定位在下方。
基本上就这些。用 clearfix 方法能快速解决老式浮动带来的页脚压缩问题，而转向 Flex 或 Grid 则是更长远的解决方案。关键是在布局变化后及时处理容器高度问题，避免视觉错乱。
