footer顶上来是因父容器高度塌陷，浮动元素脱离文档流致其无法撑高；clear: both无效常因footer非块级、定位脱离流、层级不匹配或被!important覆盖；推荐用display: flow-root等bfc方案从源头解决。
footer 顶上来是因为父容器高度塌陷
浮动元素脱离文档流，导致其直接父容器无法感知子项高度，计算出的 height 接近 0。后续的 footer 按照“上面没内容”渲染，自然就顶到视口顶部或侧边栏旁——这不是 footer 自己错位，而是它前面那个包裹浮动的容器（比如 .main 或 #content）根本没撑开。
clear: both 加在 footer 上却无效的常见原因
很多人写 .footer { clear: both; } 但没效果，问题往往出在：
-
footer是inline或inline-block——clear只对块级元素生效，必须加display: block -
footer设了position: fixed或position: absolute—— 定位元素脱离文档流，clear被忽略 -
footer和浮动元素不在同一层 DOM 层级 —— 比如浮动全在.main内，而footer在.main外，这时它清的是“不存在的兄弟”，无参照物 - 第三方 CSS（如 Admin 模板）写了
.footer { clear: none !important; }，覆盖了你的规则；检查开发者工具里clear值是否被划掉
比 clear: both 更可靠的解法：让父容器自己包含浮动
与其在 footer 上打补丁，不如从源头解决塌陷。推荐按优先级使用以下方式：
-
.wrapper { display: flow-root; }—— 现代标准，触发 BFC，无裁剪副作用，Chrome 58+/Firefox 57+/Safari 10.1+ 支持 -
.wrapper { overflow: hidden; }—— 兼容 IE6+，但会意外裁剪position: absolute的下拉菜单或 tooltip -
.wrapper::after { content: ""; display: table; clear: both; }—— 仅需兼容老项目时用；注意必须加在**直接包裹浮动子元素的容器**上，不是body或最外层 layout
Flex/Grid 布局下还用 clear: both 就是白忙
如果外层已设 display: flex 或 display: grid，那 clear: both 对 footer 完全无效——这些容器天然不塌陷。此时 footer 顶上来大概率是：
-
body或外层容器没设min-height: 100vh，视口内高度不足 -
main不是body的直接子元素，中间多了一层未设display: flex的包裹层 - 局部用了
float却没限制作用域，浮动影响溢出到父 Flex 容器之外
真正容易被忽略的是：清除动作不是加得越多越好，而是要加在浮动结束、文档流恢复的那个交界点上——这个点，往往不在你第一眼看到的 HTML 结构位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
