圣杯布局必须用padding+float+relative三件套，因其需满足中间栏优先渲染且视觉居中、两侧栏固定宽度而中间自适应的核心约束；双飞翼则通过多一层main-inner嵌套用margin替代relative定位，但对HTML结构侵入更强。
圣杯布局和双飞翼布局不是“必须手写才能过面试”的硬性考点，而是考察你对 CSS 流体布局、浮动清除、负 margin、BFC 等底层机制的理解深度。光背代码没用，写错一行 margin 或漏一个 position 就会塌陷。
圣杯布局为什么必须用 padding + float + relative 三件套？
核心约束是：中间栏优先渲染（语义和 SEO 要求），但视觉上要居中；两侧栏固定宽度，中间自适应。纯 float 无法让中间栏“让出位置又不被遮挡”，所以得靠父容器的 padding 预留空间，再用子元素 position: relative 拉回——这是唯一能兼顾 DOM 顺序、视觉顺序和流式响应的方式。
常见翻车点：
- 忘了给父容器设
padding-left和padding-right，导致左右栏直接覆盖中间内容 - 左栏用
margin-left: -100%但没配合left: -200px（假设宽 200px），结果飘到屏幕外 - 右栏用
margin-left: -200px却没加right: -200px，造成右侧空白或重叠 - 中间栏没设
min-width，窄屏下被挤压变形
双飞翼布局比圣杯少一步 relative 定位，但多一个 margin 嵌套层
它把中间栏内容再包一层 <div class="main-inner">，靠内层的 margin-left 和 margin-right 撑开空间，省掉定位计算。看起来更“顺”，实则对 HTML 结构侵入更强。
立即学习“前端免费学习笔记（深入）”；
典型误用场景：
- 直接复制圣杯的 HTML 结构去套双飞翼，没加那层
main-inner，导致margin无效 - 给
main-inner设了width: 100%，反而触发 BFC 导致左右栏被挤到下一行 - 左右栏用了
float: left但父容器没触发 BFC（比如没设overflow: hidden），高度塌陷 - 在 Flex/Grid 已普及的今天，还强行用双飞翼做响应式，忽略
gap和minmax()的天然适配能力
display: table 和 flex 能不能替代？面试时怎么答？
能，而且更可靠。但面试官问圣杯/双飞翼，本质是在查你是否理解“没有现代布局时怎么破局”。答法要分层：
- 直说
flex是首选：display: flex+flex: 1中间栏 +flex-basis控制侧栏，5 行搞定，无塌陷风险 - 承认
table可行但已淘汰：它强制等高、语义错误、vertical-align干扰大，连 IE8 都不推荐 - 强调兼容性陷阱：如果项目要支持 IE9，
flex就得写 -ms- 前缀，而圣杯/双飞翼反而更稳——这时候才体现手写价值 - 反问一句：“如果现在从零开始，还会选它吗？” 大部分面试官会笑，然后转向 Grid 问题
真正容易被忽略的，是两栏固定宽度时的单位选择：px 在高清屏下会缩，em 受字体影响，rem 又依赖根字号——实际项目里，用 ch 或 vw 配合 min/max-width 才是活路。手写一遍不如想清这一句。
