footer 跑到内容中间是因为浮动元素脱离文档流导致父容器高度塌陷，需在 footer 自身加 clear: both；更优解是让浮动容器触发 BFC，如设 display: flow-root。
footer 跑到内容中间，是因为它没“看见”前面的浮动
浮动元素脱离文档流，导致其父容器高度塌陷；后续的 footer 就按“上面没内容”来渲染，自然顶到页面顶部或侧边栏旁边。这不是 footer 自己错了，而是它前面那个包裹浮动内容的容器（比如 .main 或 #content）根本没撑开高度。
clear: both 必须加在 footer 自身上，而不是父容器里
很多人把 clear: both 写在浮动容器的 CSS 里，比如 .main { clear: both; }，这完全无效。因为 clear 只对**自己所在的元素**生效——它告诉浏览器：“我这个元素，下方不能有浮动”。所以必须作用于 footer 这个元素本身：
-
footer { clear: both; }✅ 正确，且最直接 -
footer { clear: left; }❌ 错误，除非你确定只有左侧有浮动 -
footer { display: inline-block; clear: both; }❌ 失效，clear只对块级元素起作用 - 如果
footer已设position: fixed或absolute，clear会被忽略
更干净的替代方案：用 display: flow-root 触发 BFC
比起在 footer 上“打补丁”，让浮动容器自己包含浮动、不塌陷，才是治本。现代写法推荐：
-
.main { display: flow-root; }✅ 语义清晰，无副作用，Chrome 58+/Firefox 57+/Safari 10.1+ 都支持 -
.main { overflow: hidden; }⚠️ 兼容性好（IE6+），但会意外裁剪下拉菜单、tooltip 或负 margin 元素 -
.main::after { content: ""; display: table; clear: both; }⚠️ 仍可用，但只应在需兼容老项目时保留；注意必须加在浮动元素的**直接父容器**上
Flex 布局下 clear: both 完全失效，别白费劲
如果你的外层用了 display: flex 或 display: grid，那 clear: both 对 footer 就不起作用——这些容器天然不塌陷，浮动子项不会影响父高。此时 footer 跑偏大概率是别的原因：
立即学习“前端免费学习笔记（深入）”；
- 外层容器没设
min-height: 100vh，视口内高度不足 -
main不是body的直接子元素，中间多了一层浮动包裹 - 某个子元素用了
position: absolute却没配好position: relative父上下文 - 误以为“用了 Flex 就能随便套浮动”，结果局部浮动又引发新塌陷
真正容易被忽略的是：清除动作不是加得越多越好，而是要加在浮动影响所及的**边界点**上——这个点，往往不在你第一眼看到的 HTML 结构位置，而在浮动结束、文档流恢复的那个交界处。
