双飞翼布局解决IE6/7下圣杯布局负margin兼容缺陷，实现中间内容优先渲染、侧边栏固定宽、主内容自适应；其核心是main用margin预留空间并配合position:relative微调，main-wrap与main双层嵌套不可省略。
双飞翼布局解决什么问题
双飞翼布局是为了解决「IE6/7 下圣杯布局的负 margin 兼容缺陷」而提出的改良方案，核心目标是在不使用 JavaScript、不依赖现代 Flex/Grid 的前提下，实现「中间内容优先渲染 + 侧边栏固定宽度 + 主内容自适应」的三栏结构。它至今仍有价值，不是因为怀旧，而是某些遗留系统、邮件模板或强兼容性要求场景中仍需支持 IE8 及以下。
为什么用 margin 而不是 float 直接撑开
双飞翼的关键在于：主内容区（main）用 margin-left 和 margin-right 预留左右栏宽度，而不是靠浮动元素自身去“推”开；左右栏则用 float + position: relative 往内挪动。这样做的好处是：
-
main的 HTML 顺序在最前，利于 SEO 和无障碍访问 - 左右栏宽度变化时，
main不会重排（只要 margin 值同步更新） - 避免圣杯布局中因父容器
padding导致的 IE6 渲染错位
main-wrap 和 main 两层嵌套不能省
这是双飞翼区别于其他浮动布局的标志性结构：
-
main-wrap是浮动容器，负责承接左右栏的float -
main是内部真实内容区，靠margin留白，再用position: relative; left: -100px（左栏宽）拉回视觉位置
漏掉任一层都会导致：要么内容被侧栏遮盖，要么 margin 失效，要么清除浮动失败。尤其注意 main 的 left 值必须严格匹配对应侧栏宽度，否则会出现空白或重叠。
立即学习“前端免费学习笔记（深入）”；
现代项目里还该用吗
纯 HTML5+CSS3 新项目基本不该用。Flexbox 一行 display: flex 就能替代全部逻辑，Grid 更是语义清晰、响应式友好。但如果你正在维护一个仍需兼容 IE8 的后台系统，或者被要求输出兼容 Outlook 2007–2013 的邮件 HTML（它们只认老式浮动），那双飞翼的 HTML 结构和 CSS 写法就是实际可行的底线方案——这时候，它的「确定性」比「简洁性」更重要。
真正容易被忽略的是：双飞翼对 HTML 顺序的强依赖。一旦把 aside 提到 main 前面，整个布局就垮了，而且这种错误在小屏预览时未必立刻暴露。
