修复footer上移的关键在于解决浮动导致的父容器塌陷，正确做法是给footer自身设置clear: both和display: block，或让浮动父容器触发BFC（如display: flow-root），而非在浮动容器上加clear。
footer上移不是它自己错了，而是浮动让父容器塌陷了——修复点不在footer上，而在浮动结束的位置。
clear: both 必须加在 footer 自身上，且它得是块级元素
很多人把 clear: both 写在浮动容器（比如 .main）上，结果完全无效。因为 clear 只对当前元素生效：它告诉浏览器“我这个盒子，下方不能有浮动”。如果加在浮动容器上，那个容器本身可能已脱离文档流，clear 就等于没写。
- ✅ 正确写法：
.footer { clear: both; display: block; } - ❌ 错误写法：
.main { clear: both; }（.main是浮动子项的父容器） - ⚠️ 如果
.footer是inline或inline-block，clear会失效——必须显式设display: block - ⚠️ 若
.footer设了position: absolute或fixed，clear不起作用，得先移除定位
更稳的做法：让浮动的直接父容器触发 BFC
与其在每个浮动后补 clear，不如让包含浮动的父容器自己“感知”高度。触发 BFC（块级格式化上下文）就能自动包含浮动子项，从源头避免塌陷。
- ✅ 推荐：
.wrapper { display: flow-root; }—— 语义清晰、无裁剪风险，Chrome 58+/Firefox 57+/Safari 10.1+ 均支持 - ⚠️ 兼容老浏览器可用：
.wrapper { overflow: hidden; }，但可能意外裁剪position: absolute的下拉菜单或 tooltip - ⚠️ 别用
zoom: 1或*height: 1px这类 IE 专属 hack，现在基本没必要
伪元素 clearfix 要加在浮动的直接父容器上
用 ::after 在父容器内部生成清除节点，比硬插空 <div style="clear: both"></div> 更干净。但它不是加了就生效，必须满足三个条件：
立即学习“前端免费学习笔记（深入）”；
- ✅
content: ""（缺省值none不触发渲染） - ✅
display: table（比block更稳妥，兼容 IE6/7 margin 双倍问题） - ✅
clear: both（left/right只清单侧，两栏布局必须用both） - ⚠️ 别用
::before—— 旧版 Safari 和 IE 对它的清除支持不稳定 - ⚠️ 必须加在**直接包裹浮动子元素的容器**上，比如
<div class="wrapper clearfix"></div>，不是body或最外层 layout
现代项目该考虑彻底绕过 float
浮动本就不是为整页结构设计的。如果你的项目支持 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放第二行 - ⚠️ 关键点：
footer必须是flex或grid容器的**直接子元素**；如果它被包在另一个浮动容器里，又绕回原问题 - ⚠️ 如果浮动仅用于图文混排（如文字环绕图片），直接套 Flex/Grid 可能破坏语义和可访问性
真正容易被忽略的是：清除浮动只是补救手段。修复点永远在浮动影响所及的边界——这个“边界”，常常不是你直觉以为的那个位置。
