flex布局中margin-top: auto实现沉底需满足三个条件：显式设置flex-direction: column、父容器有可计算高度（如min-height: 100vh）、目标元素不能被flex-grow或align-items: stretch拉伸占满空间。
因为它是 Flex 布局中对“主轴剩余空间”的主动吞并行为，不是靠定位或拉伸，而是把 margin-top 当作一个可无限扩张的“吸尘器”，吃掉它上方所有未被占据的垂直空间。
flex-direction: column 是前提，否则 margin-top: auto 完全无效
Flex 容器默认是 flex-direction: row，此时主轴是水平方向，margin-top: auto 属于交叉轴，只在有明确高度且未被拉伸填满时才可能生效（且效果是垂直居中，不是沉底）。只有当容器显式设为 flex-direction: column，主轴才变成垂直方向，margin-top: auto 才真正获得“吃掉主轴起点侧剩余空间”的能力——也就是把元素往下推到底部。
- 检查你的父容器是否漏写了
flex-direction: column，仅靠子元素加margin-top: auto不会触发沉底 - IE11 需要额外加
display: -ms-flexbox，否则整个 Flex 上下文不成立，margin-top: auto归零 - 别依赖浏览器默认值，
flex-direction必须显式声明
容器必须有可计算的高度，否则没空间可“吸”
margin-top: auto 不是魔法，它需要一个明确的、未被子项占满的主轴长度。如果父容器高度由内容撑开（比如没设 height 或 min-height），那它实际高度就等于所有子项高度之和，没有“剩余空间”，margin-top: auto 就会被解析为 0。
- 常见写法：
min-height: 100vh（推荐）或height: 100%，但后者要求html和body也设好高度基准 - 不要只给
body加display: flex—— 浏览器对body的 Flex 支持不稳定，尤其旧版 Safari - 避免给目标元素（如 footer）设
height+margin-top: auto同时存在，某些 Safari 版本会算错剩余空间，导致上层内容塌缩
子元素不能被 flex-grow 或 align-self: stretch “吃掉”剩余空间
一旦某个子元素设置了 flex: 1、flex-grow: 1 或默认的 align-items: stretch（在 column 下会让子项拉高填满交叉轴），它就会主动占满所有可用空间，margin-top: auto 就失去了可操作的“空白地带”。
- 确保目标元素（如 footer）没写
flex: 1、flex-grow: 1或height: 100% - 如果容器用了
align-items: stretch（默认），而 footer 又没设固定高度，它仍会被拉伸——此时margin-top: auto无效 - DOM 必须干净：注释、换行符产生的文本节点会让 :last-child 失效，footer 必须是 flex 容器的**直系子元素**
最常被忽略的一点：这个机制完全依赖“空间存在”和“方向匹配”。写错 flex-direction、漏掉容器高度、或让其他子项偷偷占满空间，都会让 margin-top: auto 看似失效——但它其实一直很守规矩，只是你没给它留出干活的余地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
