浮动导致父容器高度塌陷使footer上移，解决方法包括：①footer加clear:both；②其前插入clear:both空标签；③父容器用clearfix伪元素清除；④改用Flex/Grid布局替代浮动。
浮动元素会让父容器高度塌陷，导致 footer 上移、覆盖内容或错位。解决的关键是在 footer 之前清除前面所有浮动的影响。
用 clear:both 清除浮动
在 footer 元素的样式中添加 clear: both，让它避开左侧和右侧的浮动元素。
例如：
footer {
clear: both;
}
这是最直接有效的方法，适用于 footer 是块级元素且紧跟在浮动内容之后的情况。
立即学习“前端免费学习笔记（深入）”；
在 footer 前插入清除元素
如果不能直接修改 footer 样式，可在它前面加一个空标签（如 div），专门用于清除浮动：
注意：该元素需与浮动元素处于同一文档流中，不能是绝对定位或 display: none 的元素。
使用伪元素清除法（推荐）
给浮动元素的父容器添加 clearfix 类，通过 :after 伪元素清除内部浮动，避免塌陷，让父容器正确包裹子元素，footer 自然下落。
CSS 示例：
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后在浮动内容的父容器上加上 class="clearfix"，比如：
正文
现代替代方案：用 Flex 或 Grid 布局
浮动本就不是为整体布局设计的。若兼容性允许，建议用更可靠的布局方式替代浮动：
- 将主内容区域设为 display: flex，侧边栏和正文作为 flex 项，无需浮动
- 用 display: grid 定义行/列结构，完全规避浮动带来的问题
- footer 放在 body 直接子元素中，配合 min-height: 100vh 和 margin-top: auto 实现底部吸附（需父容器为 flex 容器）
