圣杯布局必须用 padding + negative margin，因 center 需 dom 在前但视觉居中，负边距将左右栏拉至首行，父容器 padding 预留空间防遮盖；双飞翼改用 center-inner 的 margin 推开侧栏，省去 relative 定位。
圣杯布局为什么必须用 padding + negative margin？
因为它的核心约束是：DOM 中 center 必须在最前（利于 SEO 和首屏渲染），但视觉上又得被左右栏“夹住”。纯靠浮动无法让后写的 left 和 right 跑到 center 左右——所以得靠负边距把它们“拽”上去，再用父容器 padding 预留空间，避免内容被遮盖。
-
container的padding-left/padding-right值必须严格等于左右栏宽度，否则会错位或重叠 -
center设float: left; width: 100%是为了占满整行，给左右栏“腾出浮动空间” -
left的margin-left: -100%是关键：把它从第二行拉回第一行起始位置；right的margin-left: -200px（假设宽 200px）则是让它紧贴center右侧边缘 - 必须加
position: relative+left/right微调，否则负边距只移动了“浮动起点”，元素本身仍会侵占中间内容区域
双飞翼布局怎么省掉相对定位？
它不靠父容器 padding 预留空间，而是让 center 内部多包一层 center-inner，用它的 margin-left 和 margin-right 直接“推开”左右栏——这样左右栏就不用微调位置，也无需 position: relative。
- HTML 结构必须多一层嵌套：
<div class="center"><div class="center-inner">...</div></div> -
.center-inner的margin: 0 200px（左右各 200px）才是实际内容区宽度，.center本身只是个“浮动容器” - 左右栏仍用负边距（
left:margin-left: -100%，right:margin-left: -200px），但不再需要left/right属性修正 - 兼容性几乎一致，但 DOM 更深一层，对 SSR 或可访问性略敏感
等高问题怎么破？别信“伪等高”
三栏高度不一致时，短栏会塌陷，背景色/边框断开——这不是视觉错觉，是浮动未清除导致的 BFC 失效。常见“加 padding-bottom/margin-bottom 拉伸”的做法本质是 hack，且在现代 Flex/Grid 下已过时。
- 圣杯/双飞翼原始方案中，需给三列都加
padding-bottom: 9999px+margin-bottom: -9999px，再给container加overflow: hidden来截断溢出 - 更稳妥的做法是：用
display: flex替代浮动（但会破坏 DOM 优先级语义），或改用display: grid（grid-template-columns: 200px 1fr 200px） - 如果必须兼容 IE8+，只能接受 hack；若支持 IE10+，建议直接弃用这两种布局，改用
flex并用order控制渲染顺序
什么时候该选圣杯，什么时候该切双飞翼？
差别不在效果，在维护成本和结构容忍度。双飞翼 DOM 更啰嗦，但 CSS 更直白；圣杯 DOM 简洁，但 left/right 的定位逻辑容易写错。
立即学习“前端免费学习笔记（深入）”；
- 项目要兼容 IE6–IE8？两个都得用，但双飞翼的 CSS 更少依赖相对定位，容错稍高
- 团队新人多、CSS 经验弱？选双飞翼，
margin比position + left/right更易理解 - 页面已有复杂浮动流，新增侧栏？圣杯更容易插入，不用改现有
center结构 - 现在（2026年）新项目还硬套？没必要。Flex/Grid 能原生支持语义优先 + 等高 + 自适应，
order和grid-column就是为这事生的
真正容易被忽略的不是怎么写对，而是：一旦用了圣杯或双飞翼，你就默认放弃了现代布局的响应式弹性。比如 min-width 断点、clamp() 宽度、aspect-ratio 等特性，全得绕着浮动逻辑打补丁。
