双飞翼布局必须套一层.inner容器，核心是让.middle通过float: left; width: 100%视觉占满整行，再由.inner用margin-left/right预留侧栏空间，避免padding撑宽导致布局错位。
双飞翼布局能用纯 CSS 实现三栏等高、主内容优先渲染，但必须靠嵌套容器 + 负边距 + 浮动配合，缺一不可；现代项目直接用 display: grid 更稳，双飞翼仅在需兼容 IE8–IE9 时才值得手动写。
为什么双飞翼要多套一层 .inner 容器？
核心是为了隔离 padding 或 margin 对主栏宽度的影响。不套这层的话，给 .middle 加左右内边距，会撑宽整个 100% 宽度，导致右侧栏被挤下去。
-
.middle设为float: left; width: 100%，它必须“视觉上占满整行”，才能让两侧栏通过负边距拉上来 -
.middle .inner才真正放内容，所有padding、margin都加在这层，不影响浮动计算 - 如果不套，改用
box-sizing: border-box+padding也能绕过，但老 IE 不支持box-sizing，所以原始方案选择嵌套
margin-left: -100% 和 margin-left: -200px 怎么配？
这是双飞翼定位的两个关键负边距，作用不同，不能互换：
-
.left的margin-left: -100%：把它从第二行“拽回”到第一行最左边（因为.middle是 100% 宽，-100% 就是向左拉一个整行） -
.right的margin-left: -200px：把它从第二行“拽回”到第一行最右边，值必须等于自身宽度（比如右栏宽200px，就写-200px） - 如果右栏宽度动态变化（如用
em或百分比），负边距就得同步改，否则错位——这也是双飞翼难维护的根源之一
如何让三栏真正等高？
双飞翼本身不提供等高能力，靠的是“伪造等高”技巧：用极大 padding-bottom + 相同大小的负 margin-bottom 拉伸容器，再用 overflow: hidden 截掉溢出部分。
立即学习“前端免费学习笔记（深入）”；
- 所有三栏都设
padding-bottom: 100000px和margin-bottom: -100000px - 父容器
.content必须设overflow: hidden（或触发 BFC 的其他方式，如display: flow-root） - 这个 trick 在 Safari 旧版、IE6–8 里有效，但在 Flex/Grid 布局下完全多余——它们原生支持等高
真正容易被忽略的点是：双飞翼依赖浮动清除机制，一旦你用 display: flex 或 display: grid 改了父容器，整个布局就崩了——不是“不兼容”，而是逻辑前提没了。它是一套精密咬合的老式齿轮，换一颗齿，就得重调全部。
