底部跑偏的根本原因是清除浮动位置错误，正确做法是给浮动父容器（如.container）设置display: flow-root或伪元素清除，而非在footer上添加clear: both。
底部跑偏不是清除浮动没写对，而是清除位置错了——clear: both加在 footer 上基本无效，它根本找不到该清的浮动参照物。
为什么 footer 加 clear: both 总是失效
clear: both 只对自身生效，且只在它前面有浮动兄弟元素时才触发换行。如果浮动全在 .container 内部，而 footer 是 .container 的后续兄弟（即结构为 .container → footer），那 footer 前面根本没有浮动元素，等于白写。
- 常见错误结构：
<div class="container">...浮动子项...</div><footer>...</footer>—— 此时footer和浮动无直接关系 -
footer被包在另一个容器里（如<main><footer></main>），浮动发生在更内层，清除点错位 -
footer设了position: absolute或display: inline-block，clear直接被忽略
真正该清除的位置：浮动容器末尾
清除动作必须落在「最后一个浮动元素之后、文档流恢复的第一个块级位置」，这个点通常就是浮动父容器自身边界——不是 footer，而是包裹浮动项的 .container。
- 给
.container加display: flow-root（推荐）：.container { display: flow-root; }，一行解决，不裁剪、不干扰定位 - 退一步用伪元素清除：
.container::after { content: ""; display: table; clear: both; }，确保content: ""和display: table同时存在 - 避免用
overflow: hidden—— 它虽能触发 BFC，但会意外裁掉position: absolute的下拉菜单或 tooltip
圣杯布局中 footer 错位的典型诱因
圣杯布局本身依赖 float + negative margin + padding 组合，稍有偏差就会连锁错位。底部跑偏常因以下几点：
立即学习“前端免费学习笔记（深入）”；
-
.container没设overflow: hidden或等效 BFC 触发，导致高度塌陷，footer直接顶到顶部 -
footer被错误地放在.container内部（如跟在.right后面），变成浮动兄弟，而非独立块级后续元素 - 左右栏用了
position: relative微调，但没配z-index，视觉上盖住了footer，实际点击区域已偏移 - 响应式断点里重写了
float但漏了清除逻辑，移动端浮动残留影响布局流
现代项目里更干净的解法
别再靠清除浮动救圣杯布局——它本质是误用 float 做整页结构。真正省心的做法是替换布局模型：
- 用
display: flex：三行 CSS 即可，order控制视觉顺序，flex: 0 0 200px固定侧栏，flex: 1中间自适应，footer自然沉底 - 用
display: grid：grid-template-areas明确划分区域，footer放在grid-area: footer，完全脱离浮动干扰 - 若必须兼容旧浏览器，至少把清除逻辑收束到
.container，别让footer承担本不属于它的布局责任
真正容易被忽略的是：清除浮动只是补丁，不是解法。只要还在用 float 布局整页，就永远要和塌陷、错位、清除点错位这些“幽灵问题”打交道。
