页脚飘在中间是因为页面容器未撑满视口且内容区未主动占位；正确做法是给根容器设display: flex、flex-direction: column和min-height: 100vh，再让main设flex: 1。
直接用 flex + min-height: 100vh 就能稳住页脚位置，样式简洁的关键不在装饰，而在结构控制得当——多数“丑页脚”其实源于布局塌陷或换行失控，不是颜色或字体的问题。
为什么页脚总飘在中间？
根本原因是页面容器没撑满视口，内容区又没主动占位。浏览器默认把 footer 当普通块级元素流式排布，内容少时它就停在内容末尾，而不是视口底部。
- 常见错误：只给
body设height: 100%，但忘了html也要设，否则高度链断掉 - 更隐蔽的问题：父容器用了
display: inline-block或被float影响，导致min-height失效 - React/Vue 项目中 hydration 阶段可能触发短暂布局抖动，建议把
min-height: 100vh直接写在根容器（如#app）上，而非body
flex: 1 不起作用的三个典型场景
flex: 1 是让主内容区“吃掉”剩余空间的核心，但它依赖父容器是 flex 且方向为 column。一旦条件不满足，它就退化成普通 flex: 0 1 auto。
- 父容器没设
flex-direction: column—— 默认是row，flex: 1会横向拉伸，不是你想要的纵向占位 - 主内容区有
height或max-height硬约束，会压制flex的弹性行为 - 页脚本身被设了
position: absolute或margin-top: auto以外的定位方式，和flex布局冲突
响应式页脚换行总错位？检查这几点
用 flex-wrap: wrap 做多列页脚时，换行点卡在文字中间、最后一行左对齐、列宽忽大忽小——这些问题几乎都出在子项的弹性定义上。
立即学习“前端免费学习笔记（深入）”；
- 别只设
flex: 1，必须带flex-basis，例如flex: 1 1 240px；纯flex: 1会让子项按比例瓜分宽度，不换行 - 子项内若有长文本（比如邮箱、URL），要加
min-width: 0，否则它会拒绝压缩，强行撑破flex-basis -
gap在 Safari 14.1 之前不支持 flex 容器，旧版本需用margin-right+:last-child模拟 - 换行后行间距靠
margin-bottom控制更可靠，gap只管同级间隙，不管换行产生的垂直空隙
真正难的不是写出第一版能用的页脚，而是当内容长度突变、屏幕缩放、字体加载延迟时，它还能保持位置和间距稳定——这些边界情况，往往藏在 min-width、flex-shrink 和盒模型细节里。
