浮动使页脚上移是因为浮动元素脱离文档流导致父容器高度塌陷，footer误判上方无内容而提前渲染；clear: both需作用于紧邻浮动后的块级元素才有效，伪元素clearfix更可靠，而Flex/Grid布局可彻底规避该问题。
为什么浮动会让页脚上移
因为浮动元素脱离了文档流，父容器高度塌陷，导致后续的 footer 元素“以为”上面没内容，直接贴着顶部或中间位置渲染。这不是 footer 自己错了，是它前面的浮动容器没撑开高度。
clear: both 为什么常被误用
clear: both 确实能阻止元素出现在浮动元素旁边，但它必须作用在「紧挨浮动容器之后」的那个元素上，且该元素得是块级、有实际占位的。常见错误包括：
- 加在
footer上但父容器设置了height或overflow: hidden，掩盖了问题却没真正清除 - 把
clear: both加在浮动元素内部（比如某个float: left的div里），完全无效 - 用了
clear: both却忘了该元素本身需要独占一行（比如误设为inline）
更可靠的清除方式：伪元素 clearfix
在浮动容器（比如 .main 或 .content）上添加 clearfix 类，比在 footer 前硬插空标签或单独加 clear 更健壮：
.clearfix::after {
content: "";
display: table;
clear: both;
}
使用时只需：...浮动内容...
注意点：
- 不要用
::before替代::after，某些老浏览器对::before清除支持不稳定 -
display: table比display: block更稳妥，避免 IE6/7 下 margin 双倍问题 - 如果项目已用 Flex 或 Grid 布局，根本不需要清除浮动——说明你还在混合旧布局逻辑，得先理清结构层级
现代替代方案：flex 或 grid 直接绕过浮动
如果你只是想让页脚永远在内容下方（比如实现“粘性页脚”），浮动本就不该是首选方案。用 Flex 更直接：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; }
footer { /* 不用管浮动，自然沉底 */ }
关键在于：main 必须是 body 的直接子元素，且不能有其他非 flex 子项干扰；footer 也不能被包裹进另一个浮动容器里——否则又绕回原问题。
浮动本身没被淘汰，但它在布局中的“必要性”已经极低。强行清除，不如先确认：这里真的需要浮动吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
