双飞翼布局核心是.middle设float:left;width:100%以占满整行并脱离文档流，使.left的margin-left:-100%能将其拽回最左边缘；.inner通过margin-left/right预留侧栏空间，侧栏用负边距嵌入空白，不依赖父容器padding。
双飞翼布局能实现左右固定、中间自适应，且主内容在HTML结构中前置——这是它比圣杯布局更利于SEO和可访问性的关键。但直接套代码很容易失败，核心卡点不在浮动本身，而在负边距的参照系和内部留白的层级设计。
为什么 .middle 必须设 float: left; width: 100%
不设这两条，后续负边距就失效。因为 .left 默认会掉到 .middle 下方（文档流自然排列），而 margin-left: -100% 的“-100%”是相对于父容器宽度计算的——只有当 .middle 占满整行（width: 100%）且脱离文档流（float: left）后，这个负值才能把它精准拽回最左边缘。
-
.middle不浮动 → 它还在文档流里，.left按正常顺序排在它下面 -
.middle浮动但没设宽度 → 它收缩成内容宽度，-100%变成一个极小值，拉不动.left - 必须用
overflow: hidden或clearfix清除父容器浮动，否则高度塌陷
.inner 的 margin-left/right 值怎么算
这两个值不是随便写的，它们直接决定左右栏能否“塞进”中间列预留的空白。关键在于：必须等于对应侧栏的宽度，且要同步更新三处：
-
.left的width（比如200px） -
.right的width（比如200px） -
.inner的margin-left和margin-right（也得是200px）
常见错误是只改了侧栏宽度，忘了动 .inner 的 margin——结果内容被侧栏遮挡，或中间列撑不开。
立即学习“前端免费学习笔记（深入）”；
margin-left: -100% 和 margin-left: -200px 的区别
这是最容易混淆的点：.left 用 -100%，.right 用具体像素值（如 -200px），原因在于它们的定位逻辑不同：
-
.left需要回到整行最左侧，所以用margin-left: -100%（相对父容器宽度） -
.right是在.left之后浮动的，它只需向左挪动自身宽度的距离，就能贴到.middle右侧空白处，所以用margin-left: -200px（相对自身宽度） - 如果
.right也写-100%，它会和.left重叠，而不是靠右
为什么不能直接给 .middle 加 margin
因为 .middle 一旦 float: left，它就脱离文档流，此时给它加 margin 不会影响其他浮动元素的位置——.left 和 .right 还是会掉下去或重叠。真正起作用的是它的子元素 .inner 的 margin，它在文档流内，能撑开实际内容区域，为两侧留出视觉空白。
这个细节被跳过，整个布局就变成“看起来像三栏，实则错位遮挡”。双飞翼不是靠父容器 padding 挤位置，而是靠 .inner 主动让出空间，再用负边距把侧栏“塞”进去——层级和顺序缺一不可。
