圣杯布局特指IE6–IE8时代用float+负margin+BFC实现的三栏等高、主内容优先渲染的经典方案；现代flex或grid虽可轻松实现相同效果，但不符合其历史定义。
圣杯布局（Holy Grail Layout）的核心诉求是：三栏等高、中间主内容优先渲染、侧边栏固定宽度、主内容自适应，且不依赖 Flexbox 或 Grid（传统语境下）。现代浏览器中用 display: flex 或 display: grid 实现极其简单，但如果你真要手写“经典圣杯布局”——即纯 HTML + CSS（float + 负 margin + BFC），那必须绕开现代方案，否则就不是圣杯，只是三栏而已。
为什么不能直接用 display: flex？
因为“圣杯布局”在 CSS 发展史上特指一种在 IE6–IE8 时代被广泛讨论的 hack 式解决方案。它强调：即使主内容 <main> 在 DOM 中排在左侧/右侧栏之后，也能视觉上居中，且整个三栏高度一致。现代 flex 布局靠 order 和 flex-grow 就能轻松实现，但它不属于“圣杯”的原始定义范畴——除非你明确接受“圣杯 = 三栏等高+主内容优先”的业务目标，而非历史实现。
- 若目标是兼容 IE8 及更早版本，必须用 float + 负 margin + 清除浮动
- 若只需支持 IE10+，
display: flex是更健壮、可维护的选择 - 若项目已用
grid，grid-template-areas一行搞定，但注意 Safari 旧版对grid的支持不一致
用 float 实现经典圣杯结构的关键步骤
HTML 结构必须按「主内容优先」顺序书写：<header> → <main> → <aside class="left"> → <aside class="right"> → <footer>。然后靠 CSS 把左右栏“拉”回主内容两侧，同时保证三栏等高。
-
<main>设置width: 100%并加左右负 margin（如margin: 0 -200px），为侧边栏腾出空间 - 左栏
float: left; width: 200px; margin-left: -100%，使其“回退”到主内容左侧 - 右栏
float: right; width: 200px; margin-right: -100%，同理“回退”到右侧 - 给包裹容器（如
<section class="container">）触发 BFC（例如overflow: hidden），防止父容器塌陷 - 所有栏需设
min-height: 100vh或统一用padding-bottom: 9999px; margin-bottom: -9999px模拟等高（后者是经典 hack）
用 display: flex 实现时最常踩的坑
看似简单，但容易忽略语义与响应式断点的配合。比如：
立即学习“前端免费学习笔记（深入）”；
- 忘记给
flex-container设min-height: 100vh，导致 footer 不贴底 - 左右栏用
flex: 0 0 200px，但没限制max-width，小屏下溢出 -
order值设错：主内容应为order: 1，左栏order: 0，右栏order: 2，否则 DOM 顺序和视觉顺序错乱 - 没处理
flex-wrap: wrap下的换行，移动端三栏变一列时未重置order，导致主内容跑最后
一个最小可用示例：
.container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.header, .footer { flex: 0 0 auto; }
.content { display: flex; flex: 1 0 auto; }
.main { flex: 1; order: 1; }
.left { flex: 0 0 200px; order: 0; }
.right { flex: 0 0 200px; order: 2; }
footer 总是卡在中间？检查这个隐藏条件
圣杯布局里 footer 不贴底，往往不是因为没设 min-height，而是因为 <main> 内容过短，而侧边栏有长文本或 padding，导致 flex 容器高度被撑开但未占满视口。此时需确保：整个布局容器（含 header/content/footer）的父元素没有意外的 height 或 max-height 限制，且 body 和 html 都设了 height: 100%。
另外，如果用了 float 方案，footer 必须放在所有浮动元素之后，并加 clear: both；若用 flex，则必须让 .container 是 body 直接子元素，否则外层嵌套块级元素可能截断高度计算。
