双飞翼布局是CSS 2.1时代兼容IE6–8的浮动+负margin三栏方案：main必须前置以保障SEO和首屏加载，通过margin预留空间，left/right用float与负margin插入；现代项目应优先使用Flexbox。
双飞翼布局的核心：用浮动+负margin绕过常规文档流限制
双飞翼不是靠Flex或Grid实现的，它本质是CSS 2.1时代为兼容IE6–8设计的“hack式”三栏方案：中间内容区优先渲染、左右侧栏通过浮动和负margin“挤”进空隙。现在用它，基本只为了兼容极老系统，或理解经典布局逻辑——别指望它比display: flex更简洁。
关键点在于：main必须放在HTML最前面（保障SEO和可访问性），但视觉上要居中；left和right靠浮动+margin-left/margin-right反向拉回，而非靠位置调整。
- 错误现象：
main写在最后，靠float: right硬塞中间 → 内容顺序错乱，屏幕阅读器读取异常 - 必须给
main加width，否则负margin会失效（浮动元素需有明确尺寸） -
left和right的width之和不能超过main的margin预留空间，否则会换行
HTML结构必须这样写：main在前，侧栏在后
顺序不是风格选择，是功能前提。浏览器按HTML顺序解析，main先加载才能保证首屏内容最快可见，也避免被侧栏遮挡。
标准结构长这样：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div>
-
container必须设overflow: hidden或clearfix，否则浮动会塌陷，高度为0 -
main要设margin: 0 200px（假设左右各200px），给侧栏留出“插入位置” -
left设float: left; width: 200px; margin-left: -100%，把它拽到main左边空白处 -
right设float: right; width: 200px; margin-right: -200px，拽到右边空白处
为什么不用圣杯布局？双飞翼的唯一优势是侧栏不依赖父容器padding
圣杯布局靠container的padding预留侧栏位置，而双飞翼全靠main的margin和侧栏的negative margin。这意味着：如果侧栏需要独立背景、边框或阴影，双飞翼更容易控制——因为left/right是独立DOM节点，不被container的padding挤压。
- 想让左栏有
background: #f0f0f0并延伸到底部？双飞翼直接设height: 100%即可；圣杯里它被container的padding切掉顶部 - 双飞翼的
left和right可以自由设z-index，不会因父级padding产生层叠上下文干扰 - 但代价是：所有宽度必须手动计算，改一个值，三个地方（
main margin、left width、right width）全得同步，极易漏改
现代项目里别硬套双飞翼，除非你真要支持IE7
Flexbox能用三行代码搞定的事，没必要用七层嵌套+负边距+清除浮动来模拟。Chrome/Firefox/Edge最新版早已原生支持display: flex，连Safari 10+都没问题。
真要兼容老环境，也建议用PostCSS自动补全，而不是手写双飞翼：
.container { display: flex; }
.main { flex: 1; }
.left, .right { width: 200px; }
- 双飞翼在Retina屏下容易出现1px错位（浮动精度问题），Flex无此困扰
- 响应式时，双飞翼要靠JS监听resize重算margin，Flex用
@media直接切flex-direction就行 - 最常被忽略的一点：双飞翼的
main无法用min-height: 100vh撑满视口——浮动脱离文档流后，vh计算基准会失效
