双飞翼布局现已基本淘汰，仅用于维护ie6–ie7遗留系统；新项目应直接使用display: flex或display: grid实现三栏布局，一行代码即可完成，语义清晰且无浮动副作用。
双飞翼布局现在基本不用了，除非你在维护 IE6–IE7 的遗留系统。新项目直接用 display: flex 或 display: grid，一行代码就能搞定，还语义清晰、无浮动副作用。
为什么 margin-left: -100% 不是把左栏“拽到屏幕最左边”
它的真实作用是让 .left 的左边界对齐 .main 的左边界——而 .main 宽度是 100%，它的左边界就是父容器左边缘。所以 margin-left: -100% 等价于“向左移动一个父容器宽度”，仅此而已。
这个值必须是百分比，否则响应式下会错位；但它只负责“定位起点”，后续能否卡进空白区，全靠 .main 自身的 margin 预留空间。
-
margin-left: -100%是相对父容器宽度计算的，父容器不能是inline-block或flex等非块级上下文，否则基准失效 - 如果父容器用了
transform、filter或will-change，某些旧版 WebView 会破坏负 margin 渲染逻辑 -
.left和.right必须与.main同级、同方向浮动（通常都是float: left），否则定位关系断裂
.main 的 margin 值必须手动匹配侧栏宽度
这是双飞翼和圣杯最根本的区别：双飞翼不靠 .container 的 padding 预留空间，而是靠 .main 自身的左右外边距腾位置。比如左栏宽 200px、右栏宽 220px，就得写：
.main { margin: 0 220px 0 200px; }
这个值不能用 % 或 auto，否则侧栏无法精准嵌入。
- 改一个侧栏宽度，
.main的margin-left和margin-right必须同步改，漏改就重叠或留白 - 侧栏若有
border或box-shadow，记得把它们的尺寸也加进margin值里，否则视觉上溢出 - 别给
.main加position: relative——双飞翼不需要这层微调，加了反而可能干扰流式布局
清除浮动不能只靠 overflow: hidden
.container 设 overflow: hidden 确实能触发 BFC 清浮动，但它会裁剪子元素的 box-shadow、transform 溢出或 position: absolute 元素。
更稳妥的做法是：
- 用伪元素清除：
.container::after { content: ""; display: table; clear: both; } - 或现代方案：
.container { display: flow-root; }（Chrome 64+、Firefox 62+、Safari 15.4+ 支持良好） - 若必须用
overflow: hidden，请确认侧栏没有需要外溢的装饰效果
真正容易被忽略的点：宽度耦合 + 隐性错位
双飞翼的麻烦不在写法本身，而在三处硬编码宽度必须严格对齐：.main 的两个 margin 值、.left 的 width、.right 的 width。只要一个没对齐，整个布局就 visibly broken——而且不报错，只悄悄错位。
更隐蔽的是：哪怕你完全写对了，只要页面里混入一个 transform、will-change 或 filter，某些 Android WebView 4.4 以下版本就可能渲染异常。这种问题不会出现在开发机上，只在特定真机环境里冒出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
