现在几乎不需要选圣杯或双飞翼布局，display: grid 或 flex 能更干净可靠地解决三栏等高+内容优先问题；仅维护 IE9–10 时才需权衡二者。
直接说结论：现在几乎不需要选——display: grid 或 display: flex 能更干净、可靠地解决三栏等高+内容优先的问题；但如果必须用老式浮动方案（比如维护 IE9–10 的遗留系统），才需要在圣杯和双飞翼之间权衡。
圣杯布局的适用场景和硬伤
圣杯布局适合 DOM 结构简单、侧边栏宽度固定且极少变更的项目。它的核心依赖是父容器的 padding 预留空间 + 侧边栏的 position: relative 微调。
-
margin-left: -100%拉左栏时，若父容器宽度小于主内容区最小宽度（比如含长单词或固定宽元素），会触发横向滚动或错位 - 左右侧栏宽度不同时，
padding必须设为两个不同值（如padding: 0 200px 0 180px），但.left和.right的left/right值也得同步改，漏一处就偏移 -
overflow: hidden触发 BFC 是必须的，但它会裁剪内部position: absolute元素的溢出部分——这点常被忽略
双飞翼布局真正省心的地方
双飞翼把定位逻辑从“容器层”下移到“内容层”，靠 .center-inner 的 margin 预留空间，侧边栏只管浮动和负边距，不再碰 position。
- 侧边栏宽度变化时，只需改
#inside { margin: 0 200px }和.left/.right的width，不用动父容器padding或相对定位值 - 没有
position: relative，避免了 z-index 层级干扰和 transform 重绘异常 - 但多一层 DOM（
<div class="center"><div class="inner">...</div></div>）在 React/Vue 中可能影响 key 稳定性或 SSR 渲染顺序
别踩这个兼容性坑：IE 下的 overflow:hidden 行为
在 IE8–9 中，overflow: hidden 在某些字体渲染模式下会导致文字锯齿或 line-height 异常；而双飞翼若用 overflow: auto 替代，又可能意外出现滚动条。
立即学习“前端免费学习笔记（深入）”；
- 圣杯布局更依赖
overflow: hidden清浮动，一旦改掉，.container高度塌陷风险陡增 - 双飞翼可改用
zoom: 1触发 hasLayout，但需额外声明*zoom: 1（IE专有 hack） - 如果项目已支持 IE10+，建议直接用
display: flex+order控制 DOM 顺序，比两种浮动方案都稳
真正要纠结的不是“选哪个”，而是“是否还在为 IE8–9 写代码”。只要能放弃这些浏览器，grid-template-columns: 200px 1fr 200px 加 grid-template-areas 就足以覆盖全部需求——浮动方案里那些像素级的 left/right 偏移、负边距计算、BFC 触发时机，全都不用再想。
