footer上浮是因浮动导致父容器高度塌陷，解决方案首选footer{clear:both}；更健壮的方式是父容器触发BFC（如display:flow-root）；现代项目推荐用flex或grid布局替代浮动。
footer上浮是因为浮动导致父容器高度塌陷
浮动元素（比如 float: left 的侧边栏或内容区）会脱离文档流，父容器无法感知其真实高度，于是“以为”自己是空的。footer紧随其后，就直接回流到浮动元素旁边——看起来像卡在中间、叠在内容上，或底部留白巨大。这不是 footer 自己错了，而是它前面那个包裹浮动的容器没撑开。
给footer自身加 clear: both 最直接有效
这是修复最快速、兼容性最好（IE6+）、无需改 HTML 结构的方式：
- 必须写在
footer元素的 CSS 规则里，例如：footer { clear: both; } - 不能写在浮动容器上（比如
.main { clear: both; }），那完全无效 -
clear: left或clear: right只清单侧，若左右都有浮动（如两栏布局），必须用both - 确保
footer是块级元素；如果它是inline或inline-block，clear会失效，得先加display: block - 如果
footer已设position: absolute或fixed，clear不起作用——得先移除定位再处理
更健壮的做法：让父容器触发 BFC，从源头避免塌陷
比起在每个浮动后补 clear，不如让包含浮动的父容器自己“包含”浮动子项。常用方式是触发 BFC（块级格式化上下文）：
- 给浮动元素的直接父容器加
overflow: hidden或overflow: auto：兼容性好（IE6+），但副作用是可能意外裁剪下拉菜单、tooltip 或负 margin 元素 - 更推荐用
display: flow-root：专为此设计，语义清晰、无裁剪风险，Chrome 58+/Firefox 53+/Safari 15.4+ 均支持 - 别用
zoom: 1或*height: 1px这类 IE 专属 hack，现在基本没必要 - 伪元素
::after清除法仍可用，但注意：content: ""+display: table+clear: both必须加在浮动元素的**直接父容器**上；且不能用::before，旧版 Safari 支持不稳定
现代项目该考虑彻底绕过浮动
浮动本就不是为整页结构设计的。如果你的项目支持 IE10+，display: flex 或 display: grid 能一劳永逸避开所有清除问题：
- Flex 方案示例：
body { display: flex; flex-direction: column; min-height: 100vh; }，然后main { flex: 1; }，footer自然沉底 - Grid 方案示例：
.container { display: grid; grid-template-rows: 1fr auto; }，把footer放第二行即可 - 关键点：flex 或 grid 容器必须是
footer的**直接父级**；如果footer被包在另一个浮动容器里，又绕回原问题 - 如果浮动仅用于图文混排（如文字环绕图片），直接套 Flex/Grid 可能破坏语义和可访问性；但如果是三栏/整页布局，强烈建议重构
真正容易被忽略的是：很多人写了 min-height: 100vh 却忘了配 flex: 1，或者漏掉了 html, body { height: 100%; } —— 这两个点一错，再标准的 flex 方案也会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
