浮动导致父容器高度塌陷，使footer上移；正确做法是给footer设clear: both或用display: flow-root触发BFC；现代布局应优先使用Flex/Grid替代float。
浮动元素脱离文档流，父容器高度塌陷
footer上移不是它自己“动了”，而是它前面的容器没撑开高度。float: left或float: right会让元素从标准文档流中抽离，父容器计算高度时直接忽略它们——如果父容器里只有浮动子项，它的height可能变成0或远小于视觉预期。footer作为后续块级元素，自然就“掉进”这个塌陷的空档里，贴着父容器底边渲染，看起来像卡在中间或盖住内容。
clear: both必须加在正确位置才生效
clear: both不是万能开关，它只对“自己”起作用：告诉浏览器“我这个元素，下方不能有浮动”。所以：
- ✅ 正确：给
footer本身设clear: both（前提是它和浮动元素同属一个包含块，且是紧邻的块级兄弟） - ❌ 错误：把
clear: both写在浮动容器（如.main）上——它不参与布局流，清了也没用 - ⚠️ 注意：
footer若被设为inline或inline-block，clear会失效；必须保证它是块级（display: block）
现代项目优先用 display: flow-root 替代清除
与其在每个浮动后补clear，不如让父容器自己“感知”浮动高度。触发BFC（块级格式化上下文）就能自动包含浮动子项：
- ✅
.wrapper { display: flow-root; }：语义清晰、无副作用，Chrome 64+/Firefox 62+/Safari 15.4+ 均支持 - ⚠️
.wrapper { overflow: hidden; }：兼容性好（IE6+），但会意外裁剪position: absolute子元素或阴影 - ❌
overflow: auto：可能在 iOS Safari 中触发非预期滚动惯性
真正该问的是：这里真的需要 float 吗？
浮动本意是图文环绕，不是做整体布局。如果你用float实现两栏/三栏，现在基本属于反模式：
- Flex/Grid 天然不塌陷，
footer沉底只需margin-top: auto或grid-template-rows: 1fr auto - 混用
float和flex容易引发层叠上下文错乱，尤其嵌套时尺寸计算不可控 - 检查开发者工具里
footer的top值异常小、前面容器height接近0，就是典型信号——别修表现，先理结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
