CSS放在底部不会直接导致布局塌陷，而是因样式延迟加载暴露原有布局缺陷（如浮动未清除、BFC未触发），引发FOUC、重排跳变或overflow:hidden失效等视觉塌陷现象。
不会导致布局塌陷——CSS 放在 底部本身就是非法写法，浏览器会自动修正，但可能引发渲染异常、FOUC 或样式未生效，看起来像“塌陷”，实际是样式加载时机错乱。
为什么 <link rel="stylesheet"> 不能放在
CSS 必须在 HTML 渲染前就位，否则浏览器无法构建正确的渲染树。W3C 规范明确要求 <link> 只能出现在 中；若写在 里，现代浏览器（Chrome/Firefox/Safari）会：
- 静默将其移入
（多数情况） - 或延迟解析，导致 DOM 已开始渲染但样式未应用（尤其在脚本阻塞时）
- 或触发重排重绘，让已渲染的元素突然跳变、背景/边框消失、浮动子元素撑不开父容器——这容易被误认为“高度塌陷”
overflow: hidden 失效时的典型表现
当 CSS 文件因位置错误而延迟加载，overflow: hidden 这类用于触发 BFC 的声明可能根本没生效，导致父容器仍处于塌陷状态：
- 浮动子元素（
float: left）脱离文档流，父容器高度为 0 - 父容器的
border或background-color只显示成一条线或完全不可见 - 后续元素（如页脚）上浮到浮动区旁，而非正常位于其下方
- 检查 computed styles 会发现
overflow值仍是visible，说明样式未注入
用 rel="preload" + as="style" 也不能绕过位置限制
即使你用 <link rel="preload" as="style" href="..."> 提前加载 CSS，它依然必须配合一个合法的 <link rel="stylesheet">（且该标签必须在 中），否则预加载的样式不会自动应用。常见错误写法：
立即学习“前端免费学习笔记（深入）”；
<body> <link rel="preload" as="style" href="main.css"> <link rel="stylesheet" href="main.css"> <!-- 错：这个在 body 里无效 --> </body>
正确做法是把 rel="stylesheet" 放回 ，预加载只是辅助手段。
真正导致“视觉塌陷”的常见组合
不是 CSS 放底部本身造成塌陷，而是它放大了已有脆弱布局的问题：
- 依赖
overflow: hidden撑开浮动父容器，但样式未及时生效 → 父容器高度为 0 - 使用
display: inline-block或float的子元素，父容器没设 BFC → 一加载慢就露馅 - JS 动态插入内容后才加载 CSS，此时 DOM 已渲染完毕，样式补上反而触发跳动
关键点在于：塌陷从来不是由“CSS 放哪儿”直接引起，而是由“样式缺失时布局已按无样式逻辑渲染”所暴露的结构性缺陷。修复要从布局模型（BFC / clearfix / flex）入手，而不是调整 link 位置——因为位置错了，连修复机会都没有。
