双飞翼布局是2006年为兼容ie6–ie7设计的基于float、负margin和padding的css hack方案，核心是让html中main元素dom顺序最前（利于seo），视觉居中显示，且三栏等高；现代项目应直接使用flex或grid实现。
别花时间学双飞翼布局——它只在要兼容 IE6–IE7 的遗留项目里才有实际意义；你现在写的任何新项目，都应该用 display: flex 或 display: grid。
双飞翼布局到底解决什么问题
它不是“更好看的三栏”，而是为 2006 年浏览器限制设计的 hack：让 HTML 中 main 元素写在最前面（利于 SEO 和可访问性），但视觉上仍显示为中间栏，同时左右栏固定宽、中间栏自适应、三栏等高。
- 核心约束有三个：
main必须在 DOM 顺序最前、必须用float+margin-left: -100%拉位置、必须靠overflow: hidden或伪元素清浮动 - 现代浏览器完全支持
order属性和弹性布局，main写在前面 +order: 0就能达成同样效果，且无塌陷、无错位风险 - 如果你真在维护一个还在跑 IE6 的系统，那才需要往下看；否则，直接跳到 flex 实现部分
手写双飞翼时最常见的三个错误
哪怕照着教程抄，也极容易卡在以下三点，导致左右栏消失、压住文字、或高度不一致：
-
.main没套.inner—— 双飞翼要求.main自身设width: 100%，再由子元素.inner设置margin-left/margin-right预留空间；直接给.main加 padding 是圣杯布局写法，混用就失效 - 负 margin 值没对齐：假设左栏宽
200px、右栏宽220px，则.inner要写margin: 0 220px 0 200px，.left要写margin-left: -100%，.right要写margin-left: -220px；少改一处，整个布局就偏移 - 父容器没触发 BFC：
.container必须加overflow: hidden或伪元素清浮动；只写float不清，.container高度会塌成 0，内容全掉下来
现代项目该用什么替代双飞翼
用 display: flex 实现“中间优先 + 三栏等高”更直白、更可靠：
.container {
display: flex;
}
.main { flex: 1; order: 0; }
.left { width: 200px; order: -1; }
.right { width: 220px; order: 1; }
-
order控制视觉顺序，flex: 1让中间栏填满剩余空间，align-items: stretch（默认）天然保证三栏等高 - HTML 可保持语义顺序：
<main></main>放最前，<aside class="left"></aside>和<aside class="right"></aside>放后面，无需嵌套.inner或算负 margin - IE10+ 完全支持 flex；若需兼容 IE9 及以下，就该考虑是否真的需要支持——而不是硬套双飞翼
真正难的不是写出那几行 CSS，而是理解每个 margin-left: -100% 绑定的是哪一层宽度、哪个容器尺寸、哪类浏览器行为。现代开发里，这种依赖浏览器渲染细节的脆弱逻辑，早该被更声明式的布局方式取代了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
