圣杯布局的核心目标是实现三栏自适应：左右定宽、中间自适应，且HTML中main必须前置以利SEO，视觉上居中；通过浮动+负margin+container内padding实现，本质是文档流错位与视觉还原的平衡。
圣杯布局的核心目标是啥
三栏自适应：左右两栏定宽，中间主内容栏自适应撑满剩余空间；且 HTML 结构中，main 内容必须写在最前面（利于 SEO 和可访问性），但视觉上要居中显示——这是它和双飞翼布局最根本的出发点。
它不依赖 Flex 或 Grid，纯靠浮动 + 负 margin + padding 实现，本质是在「文档流错位」和「视觉还原」之间做平衡。
为什么必须给 container 加 padding，而左右栏用 margin 拉回来
这是整个布局能成立的关键机制。如果不加 padding，左右栏浮动后会直接覆盖 main 的顶部区域，导致内容被遮挡。
-
container设置padding-left: 200px和padding-right: 150px，为左右栏「预留视觉位置」，让main自然居中流动 - 左栏
float: left; width: 200px; margin-left: -100%;—— 负 margin 把它从文档流起点「拽回」到 container 左边框处 - 右栏
float: right; width: 150px; margin-right: -150px;—— 同理拽到右边框，注意这里margin-right值等于自身宽度，不是负百分比 -
main必须先写，并设置float: left; width: 100%;，才能占据整行，再靠 container 的 padding「挤出左右空隙」
常见翻车点：IE8– 不支持 box-sizing: border-box 怎么办
如果左右栏用了 border 或 padding，又没设 box-sizing，IE8 下实际宽度会超出设定值，导致右栏掉到下一行。
立即学习“前端免费学习笔记（深入）”；
- 务必对所有浮动栏统一加
box-sizing: border-box;（配合-webkit-box-sizing和-moz-box-sizing） - 避免在左右栏上直接写
width + padding + border超出预设值；更稳妥的做法是把边框写在 container 上，或用伪元素模拟 - IE8 不支持
display: table-cell等替代方案，所以负 margin + padding 这套仍是唯一可靠路径
现代开发还该手写圣杯布局吗
几乎不用了。Flex 和 Grid 几乎零成本实现同样效果，代码更直白、可维护性高、响应式友好。
- Flex 版只需
display: flex+flex: 1给 main，左右设固定width，无需任何负 margin - Grid 版一行
grid-template-columns: 200px 1fr 150px就完事，HTML 顺序完全自由 - 但理解圣杯原理仍有价值：它暴露了浮动布局的边界，也帮你判断哪些老项目里「看似奇怪」的 margin/padding 组合其实是在救布局
真遇到要兼容 IE8 的遗留系统，别硬套现代语法，老老实实检查 margin 符号、padding 方向、以及 float 元素是否都触发了 hasLayout（比如加 zoom: 1）。
