圣杯布局用 float 实现最稳妥，但必须采用「中-左-右」HTML 顺序并配合三处负 margin：.center 设 float:left+width:100%，.left 设 float:left+width:200px+margin-left:-100%，.right 设 float:left+width:200px+margin-left:-200px，.container 需 padding:0 200px。
圣杯布局用 float 实现最稳妥，但必须配合负 margin 和特定 HTML 顺序，否则中间栏会被侧边栏挤掉或错位。
HTML 结构必须是「中-左-右」顺序
这是整个布局能成立的前提。浏览器按文档流渲染，float 只是视觉上挪位置，底层 DOM 顺序决定内容可访问性、SEO 和默认流走向。
错误写法（左-中-右）会导致中间栏被左侧栏遮挡或换行；正确结构如下：
<div class="container"> <main class="center">主内容</main> <aside class="left">左侧栏</aside> <aside class="right">右侧栏</aside> </div>
-
main放最前，保证语义优先和键盘焦点顺序合理 -
left紧跟其后，才能用margin-left: -100%拉回左边 -
right放最后，用margin-right: -200px（假设宽 200px）拉到右侧
核心 CSS：三处负 margin 缺一不可
圣杯布局的“魔法”全靠三个负 margin 配合 float 和 padding 完成，少一个都会破版。
立即学习“前端免费学习笔记（深入）”；
-
.center加float: left+width: 100%占满容器 -
.left加float: left+width: 200px+margin-left: -100%（拉回容器最左） -
.right加float: left+width: 200px+margin-left: -200px（拉回右侧紧贴中间栏右边缘） -
.container必须加padding: 0 200px（左右各留出侧栏宽度），否则侧栏会盖住中间栏文字
注意：margin-left: -100% 是相对于父容器宽度计算的，不是像素值；而 margin-left: -200px 是固定像素，需与侧栏 width 严格一致。
兼容性与现代替代方案的取舍
圣杯布局在 IE6+ 原生支持，但它的 HTML 顺序反直觉，维护成本高；CSS Grid 出来后，display: grid 一行就能替代整套 hack：
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
}
但如果你必须支持老项目或需要精确控制 float 行为（比如嵌套在 legacy CMS 中），就绕不开那三处负 margin 和固定宽度侧栏。此时务必检查：
- 所有侧栏
width和对应margin数值是否完全一致 -
.container的padding是否等于侧栏宽度，且不能用box-sizing: border-box覆盖它（否则 padding 会压缩内容区） - 不要给
.center设固定宽度，它必须靠width: 100%自适应
真正容易崩的点不在代码多寡，而在 HTML 顺序和 margin 符号——left 用 margin-left: -100%，right 用 margin-left: -200px，这两个负号方向和单位混用，抄错一个就全乱。
