圣杯布局用负margin定位边栏且需relative微调，双飞翼用嵌套inner的margin腾位、无需relative；二者均须清除浮动。
圣杯布局和双飞翼布局本身不冲突，冲突来自对 margin 负值的误用和盒模型理解偏差——尤其是当开发者混淆了“内容预留”和“视觉位移”的边界时。
为什么 margin-left: -100% 在圣杯中有效，但在双飞翼里不能直接套用
圣杯布局依赖 margin-left: -100% 把左栏从中间栏右侧“拽回”容器最左端，前提是：父容器 .container 没有设置 width，且三栏都 float: left。此时 -100% 是相对于父容器宽度计算的，能精准对齐。
双飞翼布局中，.center 已设 width: 100%，若再给它加 margin-left: -100%，会导致其脱离文档流起始位置、向左溢出，且内部子元素（如 .inner）的 margin 会叠加在已满宽的父级上，触发盒模型超限（width + margin > 100%），造成横向滚动或错位。
- 圣杯：负 margin 用于定位边栏，不作用于主内容区
- 双飞翼：负 margin 只出现在嵌套子层（如
.inner），主内容区（.center）只负责浮动占位 - 关键区别：
-100%在圣杯中是“拉边栏”，在双飞翼中若误加到.center上，就是“拉垮整个主栏”
padding vs margin 预留空间：何时该用哪个
圣杯布局用 padding-left 和 padding-right 在 .container 上“硬挤出”左右边栏空间，本质是扩大容器内容区，让 .center 的 100% 宽度自动避开边栏区域。
立即学习“前端免费学习笔记（深入）”；
双飞翼布局不用容器 padding，而是靠 .inner 的 margin-left 和 margin-right “主动腾位”，把内容往中间缩。这种方式不改变容器尺寸，但要求 .center 必须是浮动块，否则 margin 不生效（非块级或未参与 BFC 的元素，外边距可能合并或失效）。
- 用
padding：适合需要容器背景色/边框包裹三栏整体的场景（如带阴影的卡片式布局） - 用
margin：适合内容区需独立控制内边距、且侧边栏可能动态显示/隐藏的场景 - 踩坑点：
padding值必须与边栏宽度严格一致；margin值也必须匹配，否则内容会被遮挡或留白过大
relative 定位在圣杯中不可省，但在双飞翼中可完全避免
圣杯布局中，.left 和 .right 靠 margin-left: -100% 和 margin-left: -200px 移动后，仍会部分覆盖 .center 内容——因为它们只是“视觉左移”，实际文档流位置未变。这时必须用 position: relative 配合 left 或 right 进行像素级微调，把边栏真正“摆正”。
双飞翼布局因内容被包在 .inner 里，且 .inner 的 margin 直接撑开了空白区，边栏浮动后自然落在空隙中，无需任何 position 干预。这也是它代码更干净的核心原因。
- 删掉圣杯里的
position: relative，左栏会盖住中间文字开头，右栏会压住结尾 - 双飞翼中加
position: relative到边栏反而可能破坏浮动流，引发高度塌陷 - 注意：
position: relative不触发新层叠上下文，但会干扰z-index逻辑，若页面有弹层，需额外检查堆叠顺序
真正容易被忽略的是：两种方案都默认依赖 overflow: hidden 或 clearfix 来闭合浮动父容器。一旦漏掉，.container 高度会坍缩为 0，背景、边框、阴影全部消失——这不是布局逻辑问题，而是盒模型基础没兜住。
