适合新手的HTML经典双飞翼网页布局入门

双飞翼布局是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 和可访问性），但视觉上仍显示为中间栏，同时左右栏固定宽、中间栏自适应、三栏等高。

1. 核心约束有三个：main 必须在 DOM 顺序最前、必须用 float + margin-left: -100% 拉位置、必须靠 overflow: hidden 或伪元素清浮动
2. 现代浏览器完全支持 order 属性和弹性布局，main 写在前面 + order: 0 就能达成同样效果，且无塌陷、无错位风险
3. 如果你真在维护一个还在跑 IE6 的系统，那才需要往下看；否则，直接跳到 flex 实现部分

手写双飞翼时最常见的三个错误

哪怕照着教程抄，也极容易卡在以下三点，导致左右栏消失、压住文字、或高度不一致：

1. .main 没套 .inner —— 双飞翼要求 .main 自身设 width: 100%，再由子元素 .inner 设置 margin-left/margin-right 预留空间；直接给 .main 加 padding 是圣杯布局写法，混用就失效
2. 负 margin 值没对齐：假设左栏宽 200px、右栏宽 220px，则 .inner 要写 margin: 0 220px 0 200px，.left 要写 margin-left: -100%，.right 要写 margin-left: -220px；少改一处，整个布局就偏移
3. 父容器没触发 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; }

1. order 控制视觉顺序，flex: 1 让中间栏填满剩余空间，align-items: stretch（默认）天然保证三栏等高
2. HTML 可保持语义顺序：<main></main> 放最前，<aside class="left"></aside> 和 <aside class="right"></aside> 放后面，无需嵌套 .inner 或算负 margin
3. IE10+ 完全支持 flex；若需兼容 IE9 及以下，就该考虑是否真的需要支持——而不是硬套双飞翼

真正难的不是写出那几行 CSS，而是理解每个 margin-left: -100% 绑定的是哪一层宽度、哪个容器尺寸、哪类浏览器行为。现代开发里，这种依赖浏览器渲染细节的脆弱逻辑，早该被更声明式的布局方式取代了。