根本原因是父容器高度塌陷且HTML结构顺序错误：中间栏未置前导致浮动后无法正确预留空间，父容器未触发BFC或设height而塌陷，使后续元素顶替原位置。
为什么中间栏会掉下去
根本原因是父容器高度塌陷 + HTML 结构顺序错误。浮动元素脱离文档流后，若父容器没触发 BFC 或设 height，它就“看不见”子元素高度，导致后续内容（比如 footer）直接顶上来，看着像中间栏掉进去了。
必须把 main 写在 HTML 最前面，左右栏跟在后面；否则负 margin 拉不回、padding 预留也失效。
-
.container要加overflow: hidden或伪元素::after清浮动，别只靠clear: both的空 div -
.main必须设width: 100%，不能写固定宽，否则无法自适应 - 漏掉
position: relative在左右栏上 →left/right偏移无效
负 margin 怎么算才不偏
关键不是“凭感觉写 -200px”，而是看它相对于谁计算：百分比负 margin（如 margin-left: -100%）按父容器宽度算，而像素值（如 margin-right: -200px）按自身宽度算 —— 这俩混用就错位。
- 左栏推荐用
margin-left: -100%+position: relative; left: -200px（200px 是它自己的 content 宽） - 右栏统一用
margin-left: -200px（不要百分比），再配position: relative; right: -200px - 所有子项必须先全局设
box-sizing: border-box，否则 padding/border 会让实际占位超出预设，负 margin 就拉不准 -
.container的padding-left至少 = 左栏 width + padding + border；padding-right同理
IE6–8 兼容怎么救
老 IE 对 margin-left: -100% 解析极不稳定，有时按视口宽算，有时按父容器宽算，结果左栏飞走或重叠。
- 左栏改用
margin-left: -200px（和自身 width 一致），右栏保持margin-right: -200px -
.container必须加zoom: 1触发 hasLayout，否则浮动+负 margin 全失效 - 避免在左栏里用
display: inline-block，老 IE 会多出空白间隙，挤乱布局 - 不要依赖
min-height做等高 —— IE6 不支持，得用 hack 或 JS 补齐
现代项目还该用吗
不该。圣杯布局是为 IE6–8 时代妥协出来的技术债，今天硬套只会引入新问题：margin 折叠难调试、BFC 触发不可控、响应式要重写整套规则、屏幕阅读器读取顺序和视觉顺序不一致。
真正该做的，是用 display: grid 配 grid-template-areas，HTML 保持「中-左-右」语义顺序，CSS 控制视觉排列 —— 既 SEO 友好，又不用算负 margin，断点切换也只需改一两行 grid-template-columns。
容易被忽略的一点：圣杯布局里所有尺寸都强耦合，改一个侧栏宽，就要同步调 padding、两个 margin、两个 position 偏移值，而 grid 下这些全是解耦的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
