双飞翼布局核心是浮动+负margin，用于实现中间内容优先渲染；HTML中main必须前置并三层嵌套，通过main-wrap占满整行、main设负margin腾出侧栏空间，左右栏用浮动与负margin定位，IE6需zoom:1等hack修复hasLayout问题。
双飞翼布局的核心是浮动 + 负 margin，不是 flex 或 grid
双飞翼布局本质是为解决「中间内容优先渲染」这一 SEO 和可访问性需求而设计的纯 CSS 浮动方案。它不依赖现代布局模块，因此在老旧浏览器（如 IE6/7）中仍能工作，但代价是结构和样式耦合度高、维护成本大。如果你项目已支持 IE10+，flex 或 grid 是更合理的选择；只有明确需要兼容古董浏览器，或必须保持 HTML 结构中 main 在前时，才用双飞翼。
HTML 结构必须把 main 放最前面，且用三层包裹
这是双飞翼能“优先渲染”的前提：DOM 顺序决定渲染和读屏顺序。中间栏必须是第一个子元素，且需套三层容器——外层 container、中间栏专用 main-wrap、以及真正放内容的 main。左右栏放在后面，靠负 margin 拉回视觉位置。
这里是主要内容左侧栏右侧栏
关键样式：main-wrap 宽 100%，main 设负 margin 拉出左右空间
核心技巧在于用 main-wrap 占满整行，再让其子元素 main 通过负 margin “挤开”左右栏的位置，从而腾出空间给浮动的侧栏。左栏右浮动、右栏左浮动，宽度固定，然后用负 margin 把 main 往左右“拽”。
-
main-wrap设置width: 100%并清除浮动影响（如overflow: hidden） -
main设置margin: 0 200px（假设左右栏各宽 200px） -
left设float: right; width: 200px; margin-right: -100% -
right设float: left; width: 200px; margin-left: -200px
注意：margin-right: -100% 是为了让左栏“退回到 container 左边缘”，否则它会卡在 main 右侧空白处。
立即学习“前端免费学习笔记（深入）”；
IE6 下要额外处理 min-height 和 hasLayout 问题
双飞翼在 IE6 中常见塌陷、高度不自适应等问题，根本原因是缺少 hasLayout。必须给 container 加 zoom: 1 或 height: 1% 触发；若 main 内容少，还需设 min-height: 1px 防止高度丢失。另外，IE6 不支持 min-height，只能用 _height hack 或 JS 补偿。
现代开发中，这些补丁几乎没人维护了——一旦你发现要查“IE6 双飞翼 hasLayout”，基本意味着该重构为 display: flex 了。
