圣杯布局仅适用于维护老项目，新项目应使用display: grid或flex；中间栏掉到第二行的根本原因是父容器高度塌陷且html结构顺序错误，必须将main置于最前并触发bfc。
圣杯布局用 float + negative margin 实现，现在只适合维护老项目；新项目直接用 display: grid 或 display: flex，否则你会反复掉进负边距计算、BFC 触发、IE 兼容和可访问性错位的坑里。
为什么中间栏总掉到第二行
根本不是“样式没写对”，而是父容器高度塌陷 + HTML 结构顺序错误。浮动元素脱离文档流后，父容器若没触发 BFC（比如漏了 overflow: hidden），就压根“看不见”子元素高度，footer 直接顶上来，看着像中间栏掉下去了。
更常见的是 DOM 顺序写反了：必须把 main 放最前，left 和 right 跟在后面。如果先写 left，它一浮动就占位，main 的 width: 100% 再怎么设也挤不进同一行。
-
main必须是第一个子元素，且设width: 100%（不能写死像素） - 左右栏都加
float: left，包括main—— 它们得在同一浮动流里 - 父容器必须清浮动：
overflow: hidden或伪元素::after，别只靠clear: both的空div - 漏掉
position: relative在左右栏上 →left/right偏移无效
负 margin 怎么写才不偏
负边距不是凭感觉写的，它严格按计算基准来：百分比值（如 margin-left: -100%）按父容器宽度算，像素值（如 margin-right: -200px）按自身 content 宽度算。混用就错位。
左栏宽 200px，推荐：margin-left: -100%（拉到容器最左） + position: relative; left: -200px（微调贴边）；右栏统一用 margin-left: -200px（不是 margin-right！），再配 position: relative; right: -200px。
-
main必须设margin: 0 200px预留空间，否则文字会被侧栏遮住 - 父容器要加
padding-left: 200px和padding-right: 200px，否则左右栏可能被裁掉 - 所有子项必须统一
box-sizing: border-box，否则padding/border会让实际宽度超出预设，负 margin 就拉不准 - 改侧栏宽度时，
main的margin、左右栏的负 margin 和left/right值必须同步改，漏一个就乱
IE6–8 下布局崩了怎么办
老 IE 对 margin-left: -100% 解析极不稳定，有时按视口宽算、有时按父容器宽，左栏直接飞走。这不是你代码错，是渲染引擎限制。
兼容方案很拧巴：左栏改用 margin-left: -200px（和自身 width 一致），右栏保持 margin-left: -200px；父容器加 zoom: 1（或 *zoom: 1）强制触发 hasLayout；避免在左栏里用 display: inline-block，老 IE 会多出空白间隙。
- 给
main加display: inline（IE6/7 特供 hack） - 禁用
min-width—— IE6 不识别 - 侧栏别用
position: relative，它会干扰 float 流程 - 不要依赖
min-height做等高 —— IE6 不支持
为什么现代项目不该再用这个方案
它不是技术错，是时代错位。圣杯布局本质是为 IE6–8 妥协出来的技术债：DOM 必须反序（语义和视觉不一致）、负 margin 值要手算、响应式几乎没法平滑降级、屏幕阅读器可能跳过侧栏、打印样式表常错位。
真正该做的，是用 grid-template-areas 显式声明区域语义，HTML 保持「中-左-右」语义顺序（SEO 和首屏友好），CSS 控制视觉排列。一行 display: grid 就能替代全部逻辑，还不用操心清除浮动、BFC、hasLayout。
最容易被忽略的一点：main 的 margin 是内容安全区，不是布局工具 —— 很多人误把它当 padding 用，结果侧栏一变宽，文字就直接贴边了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
