根本原因是浮动元素脱离文档流导致父容器高度塌陷，使页脚失去定位基准而上移重叠；解决需在父容器设display: flow-root或用伪元素清除，或改用flex布局。
为什么浮动会让页脚和内容重叠
根本原因不是“页脚没放好”，而是浮动元素脱离文档流后，父容器高度塌陷，导致后续的 footer 没有参照基准，直接贴着塌陷后的父容器底部渲染——看起来就像盖在主内容上。
典型表现：你看到 .main 下面紧挨着 .footer，但用开发者工具选中 .footer 会发现它实际位于 .main 的顶部区域；同时 .main 在检查器里显示高度为 0 或远小于预期。
- 浮动子元素（如
.sidebar、.card）未被父容器包裹 → 父容器无法感知高度 -
footer是普通块级元素，按正常流排布，但它的“上一个兄弟”容器高度为 0，所以它就“掉”上去了 - 加
clear: both到footer上可能无效——如果它前面没有浮动元素，或浮动已被局部 BFC 截断，clear就失去作用对象
清除浮动必须加在谁身上
clear 不是“清掉浮动”，而是告诉**当前元素**：“你不准紧贴左侧/右侧/两侧的浮动元素”。它必须加在需要避开浮动的元素自身上，而不是浮动元素自己。
错误写法：.float-box { clear: both; } —— 完全无意义，浮动元素自己不需要清。
立即学习“前端免费学习笔记（深入）”；
正确写法（任选其一）：
- 给
footer加：clear: both;（前提是它前面紧邻的是浮动元素，且未被其他 BFC 隔开） - 给
.main（浮动元素的父容器）加display: flow-root;（推荐，现代、语义清晰、无裁剪副作用） - 给
.main加伪元素清除：.main::after { content: ""; display: block; clear: both; }
注意：overflow: hidden 虽能触发 BFC，但在有下拉菜单、tooltip 或横向滚动需求时会意外裁剪内容，不建议盲目使用。
flexbox 替代方案比清除更彻底
如果你的布局目标是“主内容占满剩余空间，页脚永远沉底”，那清除浮动只是补丁，flex 才是正解。它天然不塌陷、不重叠、响应式友好。
只需三步（移除所有浮动相关 hack）：
- 给
body或最外层容器设：display: flex; flex-direction: column; - 给主内容区域（如
.main）设：flex: 1;（或flex-grow: 1;） - 确保
footer是同级元素，并保持默认display: block，它会自动被推到末尾
关键点：flex: 1 必须配合一个有高度基准的父容器。不要写 body { height: 100vh; }，这会锁死伸缩能力；改用 min-height: 100vh 更安全。
移动端特别容易踩的坑
在手机上，浮动重叠往往叠加了视口缩放、字体渲染差异和小屏宽度限制，问题更隐蔽：
-
float: left元素总宽度（含margin+padding+border）超过 100% → 自动换行叠在下方，看起来像重叠 - 用
white-space: nowrap或font-size: 0消除间隙时，忘了在子元素里重置font-size，导致文字不可见 -
footer写了position: fixed却没配z-index和top: auto/bottom: 0，结果在部分安卓 WebView 中悬浮居中 - 某些旧版 Safari 对
display: flow-root支持不全，可降级用display: -webkit-flex+display: flex双声明
真正要警惕的，是把“清除浮动”当成银弹。只要页面里还存在多个浮动 + 固定高度 + clear 混用，任何一次字体加载延迟、图片尺寸变化或 CSS 压缩都可能让重叠重现。
