双飞翼布局是专为ie6–ie7兼容设计的过时方案，现已被flex和grid取代；它依赖负margin、padding预留与bfc触发，结构脆弱、调试困难，仅适用于老项目维护或面试考察。
别从双飞翼布局开始学 HTML。
双飞翼布局不是入门练习，而是兼容性补丁
它诞生于 2006 年左右，专为绕过 IE6–IE7 的渲染缺陷而设计。你现在打开 Chrome、Firefox 或 Edge，display: flex 或 display: grid 一行代码就能实现三栏等高、中间优先、自适应宽度——根本不需要写 margin-left: -100%、overflow: hidden、zoom: 1 这些易错又难调试的 hack。
- 真想练三栏布局，直接用
display: flex：.container { display: flex; }+.center { flex: 1; }+.left, .right { width: 200px; } - 想保留 HTML 中间内容在前（利于 SEO），加一句
.left { order: -1; }和.right { order: 1; }就行 - 双飞翼要求你手动算
margin-left: -100%对应谁的宽度、padding留多少、overflow: hidden会不会裁掉阴影或下拉菜单——零基础根本没法判断哪一步错了
如果非要手写双飞翼，必须严格按结构来
HTML 顺序不能乱：<div class="main-wrap"><div class="main"><div class="main-content">...</div></div></div>，再跟 <div class="left"> 和 <code><div class="right">。少一层 <code>.main-content，margin 就会撑破 width: 100%，整个布局崩掉。
-
.main-wrap必须设overflow: hidden（或伪元素清浮动），否则高度塌陷，footer 直接叠在内容上 -
.left的margin-left: -100%是按.main-wrap宽度算的，不是视口宽，也不是.main宽 -
.main-content的margin: 0 200px（假设侧栏各 200px）必须和.left/.right的width严格一致，差 1px 都可能重叠或留白
常见错误现象及定位方式
左栏/右栏没显示，或压住中间文字，90% 是这三个地方出问题：
-
.main-wrap没触发 BFC：检查是否漏了overflow: hidden或清浮动伪元素 -
.main-content的margin值 ≠ 侧栏width：比如侧栏设width: 220px，但.main-content写了margin: 0 200px -
.left和.right没同级、没同向浮动：必须都float: left，不能一个left一个right；也不能把.left套进.main里
真正难的不是抄几行 CSS，而是理解每个百分比、每个负 margin 绑定的是哪一层容器的尺寸——这种耦合在响应式断点切换时会突然失效，且很难复现。现代布局方案没有这种隐式依赖。
