双飞翼布局是css 2.1时代为兼容ie6–ie8设计的浮动+负margin三栏方案，核心是main前置保障seo、用margin-left:-100%和像素值负边距将左右栏“拽回”可视区，现代项目应优先使用flexbox。
双飞翼布局现在基本不用了——它只在需要兼容 IE6–IE7 的极少数遗留项目里有意义。如果你不是在维护老系统，别花时间手写这套逻辑。
为什么双飞翼必须用 float + margin-left: -100%
这不是“为了炫技”，而是为绕过 IE6 渲染缺陷：它无法让中间内容 DOM 在前、视觉居中且三栏等高。纯 float 会让左右栏依赖中间宽度，margin-left: -100% 是把左栏“拽回”容器左边缘的唯一可靠方式（百分比按父容器宽度算）。右栏则靠 margin-left: -Xpx（X 是右栏宽度）拉到主内容右侧。
.middle 必须套一层 .inner，不能直接设 padding
双飞翼和圣杯最本质的区别就在这层嵌套：.middle 自己设 float: left; width: 100% 占满一行，再由子元素 .inner 用 margin-left 和 margin-right 主动空出左右栏位置。如果直接给 .middle 加 padding，IE6 下负 margin 会失效，内容被遮盖。
- 左栏宽 200px、右栏宽 220px →
.inner要写margin: 0 220px 0 200px - 改侧栏宽度时，必须同步更新三处：
.left/.right的width、.inner的两个margin值 -
.inner不能设display: inline，IE6 会忽略负 margin
清浮动不能只靠 overflow: hidden
overflow: hidden 是为了触发 BFC，防止父容器塌陷，但它副作用明显：裁剪 box-shadow、transform 溢出、position: absolute 子元素。更稳妥的是伪元素法：
.container::after {
content: "";
display: table;
clear: both;
}
现代浏览器都支持，也能触发 BFC，且无裁剪风险。如果容器本身需要横向滚动（比如图表区），overflow: hidden 就完全不可用，必须换方案。
真要兼容 IE6，这些 hack 不能省
IE6 对 min-width、max-width、inline-block 支持极差，双飞翼能跑起来全靠几个关键补丁：
-
.container必须设height: 1%或zoom: 1触发 hasLayout（仅 IE6/7） - 左右栏不能设
margin-top，否则 IE6 会双倍边距——改用padding-top或额外包裹一层 - 所有宽度必须用
px，百分比在 IE6 中计算不稳 -
margin-left: -100%在 IE6 下若计算异常，可 fallback 成固定值如margin-left: -800px+ 条件注释
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
