浮动导致页脚塌陷的根本原因是clear: both仅清除浮动影响却不控制垂直定位，须配合min-height: 100vh与html, body { height: 100% }确保高度继承，并优先采用flex或grid布局替代浮动。
浮动导致页脚塌陷：为什么 clear: both 不管用
清除浮动本身不会让页脚“贴底”，它只解决父容器高度坍塌，但不控制页脚在视口中的垂直位置。常见现象是：内容少时页脚飘在半空，清完浮动后页脚还是没到底部，甚至和内容重叠。
根本原因是：clear: both 只让元素避开前面的浮动元素，不赋予它“撑满剩余高度”的能力；而父容器（比如 body 或 .wrapper）若没设最小高度，就无法为页脚预留底部空间。
- 必须给包裹内容+页脚的外层容器设置
min-height: 100vh，不是height: 100vh（否则内容超长时页脚会被截断） -
clear: both要加在页脚自身上，或加在页脚前一个清除元素（如<div style="clear:both"></div>），不能只加在浮动容器上 - 如果浮动元素在
header或aside，页脚清除的是它们的影响，但若主内容区（main）没参与浮动，清除动作可能完全无效
清除浮动后页脚仍没到底：检查高度继承链
即使写了 min-height: 100vh，页脚还是悬空，大概率是高度没传下去——html 和 body 默认不继承 100vh，子元素的百分比高度会失效。
实操上必须显式声明：
立即学习“前端免费学习笔记（深入）”；
html, body {
height: 100%;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}注意：height: 100% 对 html 和 body 是必需的，否则 .wrapper 的 min-height: 100vh 虽生效，但内部 flex 布局计算剩余空间时可能误判。
- 不要只设
body { min-height: 100vh }，它不保证子元素能正确分配空间 - 如果用的是传统浮动布局（非 flex），
.wrapper内需确保内容区有明确高度或使用overflow: hidden触发 BFC 来包裹浮动，否则min-height可能被忽略 - 移动端 Safari 对
vh有兼容问题（地址栏缩放影响），可临时用100dvh替代（支持较新）
给页脚设固定高度后布局错乱：浮动与 margin 的冲突
很多人给 footer 设了 height: 60px，再用 margin-top: -60px 拉上去，结果在内容短时正常，内容长时页脚被内容顶飞——这是浮动元素脱离文档流后，外边距折叠失效 + 父容器未清除导致的定位失控。
更稳的做法是用 flex 布局收尾，而不是靠负 margin 抵消浮动残留影响：
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; } /* 吃掉所有剩余空间 */
footer { height: 60px; }- 一旦用了浮动，就别混用
margin-top: -X拉页脚，这属于“补丁式修复”，极易在响应式或内容变化时崩坏 - 如果必须保留浮动（如旧项目无法重构），页脚需设
clear: both+position: relative+top: auto，避免被浮动元素的margin-collapse干扰 - 检查页脚是否被设置了
float: left/right—— 这会让它也脱离流，清除动作直接失效
现代替代方案：为什么该放弃浮动实现页脚贴底
浮动本意是文字环绕图片，不是做整体布局。用它强行撑开页脚，本质是在对抗 CSS 正常流，代价是：清除逻辑分散、高度计算不可靠、响应式断点易出错、调试时难以追踪渲染路径。
真正轻量且健壮的解法只有两个：
- Flex：外层
display: flex+flex-direction: column+main { flex: 1 }，无浮动、无清除、无 hack - Grid：
body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }，语义清晰，兼容性（Chrome 57+/Firefox 52+）已足够落地
还在用浮动清浮动调页脚高度，等于在用螺丝刀拧螺母——不是不行，但每次都要多想三层，而且换个屏幕尺寸就可能松动。
