双飞翼布局现仅用于兼容IE6–IE7的遗留项目；其用负margin而非纯float，是为了实现中间内容优先渲染与三栏等高，通过content的padding预留空间、左右栏负margin“拉入”空白区，并需overflow:hidden触发BFC。
双飞翼布局现在基本不用了，浏览器原生支持 flex 和 grid 后，它只在需要兼容 IE6–IE7 的极少数遗留项目里还有意义。如果你不是维护老系统，别花时间手写双飞翼。
为什么双飞翼要用负 margin 而不是 float 直接排？
核心是解决「中间内容优先渲染」和「三栏等高」两个需求。纯 float 会让左栏、右栏依赖中间宽度，且无法保证高度一致；而双飞翼通过给中间栏的 content 设置负 margin，把左右栏“拉”进中间栏预留的空白区域，从而让 HTML 结构保持「中-左-右」顺序（利于 SEO 和可访问性）。
常见错误现象：left 或 right 没显示出来，或压住中间文字——大概率是负 margin 值没对上 padding，或者父容器没设 overflow: hidden 清浮动。
- 中间栏必须设
width: 100%，再用padding-left/padding-right留出左右栏位置 - 左右栏用
float: left/float: right，宽度固定，然后分别加margin-left: -100%（左栏）和margin-right: -100%（右栏） - 外层
container必须触发 BFC，推荐overflow: hidden，别用zoom: 1（IE专有，现代项目无必要）
双飞翼 vs 圣杯布局：区别在哪？
两者目标一致，但实现细节不同。圣杯布局靠 position: relative + left/right 移动左右栏；双飞翼靠 margin 负值 + padding 预留空间。实际效果几乎一样，但双飞翼更易理解、少一层定位上下文干扰。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：position: relative 在圣杯里是给 container 加的，而在双飞翼里完全不需要——加了反而可能破坏流式布局。
- 双飞翼的 HTML 结构是：
main→left→right（都在main内部） - 圣杯的 HTML 是：
main→left→right（三者平级，同为 container 子元素） - 双飞翼的
main内部需嵌套一层content用于 padding 控制，圣杯不需要这层
如果真要兼容 IE6，哪些样式不能省？
IE6 对 min-width、max-width、inline-block 支持极差，双飞翼能跑起来，全靠几个关键 hack：
-
container必须设height: 1%或zoom: 1触发 hasLayout（仅 IE6/7） - 左右栏不能设
margin-top，否则 IE6 会双倍边距——改用padding-top或包裹一层 - 避免在
content上用display: inline，IE6 会忽略负margin - 所有宽度必须用
px，百分比在 IE6 中计算不稳
示例关键 CSS 片段：
.container {
overflow: hidden;
*zoom: 1; /* IE6/7 only */
}
.main {
float: left;
width: 100%;
}
.content {
margin: 0 200px; /* 预留左右栏宽度 */
}
.left {
float: left;
width: 200px;
margin-left: -100%;
}
.right {
float: right;
width: 200px;
margin-right: -100%;
}真正麻烦的从来不是写法，而是当某天你发现某个按钮在 IE6 下被右栏遮住一半，却查不出是哪个 z-index 没生效、还是 hasLayout 没触发——这种问题没有通用解，只能逐层加 zoom: 1 试。
