双飞翼布局的核心是中间列拆分为.middle和.inner两层，.inner通过margin-left/right预留侧栏空间，.left/.right用负边距嵌入空白，不依赖父容器padding。
双飞翼布局的核心是 middle 的 inner 元素用 margin 预留侧栏空间
双飞翼不是靠父容器 padding 挤出位置，而是把中间列拆成两层：.middle 浮动占满，再用子元素 .inner 通过 margin-left 和 margin-right 主动“空出”左右宽度。这样 left/right 就能用负边距塞进这些空白里，且不依赖 container 的 padding。
常见错误是直接给 .middle 加 margin——它一浮动就脱离文档流，margin 不会推挤其他浮动元素；必须作用在内部的 .inner 上才生效。
-
.middle必须设float: left; width: 100%，否则无法触发后续负边距的定位逻辑 -
.inner的margin-left值要和.left宽度一致（比如200px），margin-right同理对应.right - 如果改了侧栏宽度，必须同步更新三处：
.left/.right的width、.inner的两个margin值
float + margin-left: -100% 是把 left 拉回最左侧的关键
因为 .middle 已经 float: left; width: 100% 占满整行，.left 默认会掉到下一行。给它加 margin-left: -100%，相当于把它向左拖拽一个父容器宽度的距离，正好回到 .middle 左边缘上方——但此时内容会被 .inner 的 margin-left 挡住，视觉上就卡在预留空白里。
注意：这个 -100% 是相对于父容器宽度计算的，不是相对于自身宽度。所以父容器不能是 display: inline-block 或其他非块级上下文，否则百分比基准失效。
-
.left不需要position: relative微调（和圣杯不同），它的位置完全由float和margin-left: -100%决定 -
.right用的是margin-left: -200px（具体值等于自身宽度），不是百分比——因为要精准贴右，百分比会随容器缩放偏移 - 所有浮动元素必须被清除，
.container推荐用overflow: hidden，避免高度塌陷
为什么双飞翼比圣杯更适合加背景或边框
因为 .left 和 .right 是独立的 DOM 节点，没有被 .container 的 padding 切割。比如你想让左栏背景色撑满整个视口高度，只需 .left { height: 100vh; background: #f0f0f0 } ——它不会被 container 的内边距截断顶部或底部。
而圣杯布局中，.left 实际位置在 container 的 padding-left 区域内，若给它设 height: 100%，基准是 container 的内容区高度，不是视口，且顶部会被 padding 抬高。
- 双飞翼的
.left/.right可自由设z-index，不受 container 的层叠上下文干扰 - 如果侧栏需响应式隐藏（如移动端），双飞翼只需
display: none，不会影响.inner的 margin 计算逻辑 - 但代价是：DOM 结构多一层（
.middle > .inner），对语义化有轻微影响
IE6/7 下 margin 百分比计算可能错乱
在 IE6/7 中，当父容器宽度未显式设定（比如靠内容撑开），margin-left: -100% 的计算结果可能为 0，导致 .left 掉到下一行。这不是 bug，是旧引擎对“未定义宽度容器中百分比”的处理差异。
解决方法只有强制父容器有明确宽度基准：
- 给
.container设width: 100%（前提是它父级有宽度） - 或用
min-width锁死最小宽度，比如min-width: 960px - 更稳妥的做法是：在 IE6/7 下降级为固定宽度布局，或直接放弃支持（2026 年多数项目已不考虑）
真正容易被忽略的是：双飞翼对 HTML 结构顺序极其敏感——.middle 必须写在 .left 和 .right 之前，否则负边距无法生效，这点一旦写错，整个布局就垮了，而且没有明显报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
