双飞翼布局需中间内容html在前、.main必须套.inner、所有浮动同级同向；其核心是.inner用margin预留空间，而非父容器padding，且负margin值严格对应侧栏宽度和容器基准。
双飞翼布局不是“用 HTML 构建”的，而是靠特定的 HTML 结构 + CSS float 和负 margin 协同实现的；现代项目中不推荐再手写这套逻辑，但如果你正在维护老系统、应付兼容性需求或面试考察，必须严格按它的三要素来：中间内容 HTML 在前、.main 必须拆出 .inner、所有浮动元素必须同级且同方向。
为什么 .main 必须套一层 .inner
这是双飞翼和圣杯最本质的区别。双飞翼不靠父容器 padding 预留空间，而是让中间列自己“推开”左右位置：.main 本身设 float: left; width: 100% 占满整行，再由其子元素 .inner 用 margin-left 和 margin-right 主动空出侧栏宽度。
-
.main一旦浮动就脱离文档流，直接给它加margin不会推挤其他浮动元素——只有作用在内部的.inner上才生效 - 假设左栏宽
200px、右栏宽220px，则.inner必须写：margin: 0 220px 0 200px - 改侧栏宽度时，必须同步更新三处：
.left/.right的width、.inner的两个margin值
margin-left: -100% 到底在拉谁、以谁为基准
这个值不是把 .left 拉到屏幕最左边，而是让它左边界对齐 .main 的左边界（也就是父容器左边缘）。百分比始终按父容器宽度计算，所以 margin-left: -100% = 向左移动一个容器宽。
-
.left默认会掉到.main下方（因为.main已占满一行），加margin-left: -100%才能把它拽回顶部同一行 - 这个 -100% 必须配合
.inner的margin-left: 200px使用，否则.left会直接盖住主内容 - IE6/7 下若百分比计算异常，可 fallback 成
margin-left: -800px（固定容器宽）+ 条件注释
清除浮动不能只靠 overflow: hidden
overflow: hidden 是为了触发 BFC，让父容器“感知”浮动子元素高度，防止塌陷。但它副作用明显：会裁剪 box-shadow、transform 溢出、position: absolute 子元素。
- 更稳妥的清浮动方式是伪元素：
.container::after { content: ""; display: table; clear: both; } - 现代浏览器支持
display: flow-root，它也能触发 BFC 且无裁剪风险 - 如果容器本身需要横向滚动（比如图表区），
overflow: hidden就完全不可用，必须换方案
真正难的不是写出那几行 CSS，而是理解每个负 margin 值背后绑定的是哪一层宽度、哪个容器尺寸、哪类浏览器行为。稍有错位，整个三栏就重叠或错行——而且这种问题在响应式断点下会突然爆发，很难复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
