margin-left: -100% 是让左栏左边界对齐 .main 左边界（即容器左边缘），以父容器宽为基准向左移动一个容器宽度，配合 .main 的左右 margin 预留侧栏空间，实现三栏自适应布局。
双飞翼布局中 margin-left: -100% 的真实作用
它不是把左栏“拉到屏幕最左边”，而是让左栏的左边界对齐 .main 内容区的左边界——因为 .main 宽度是 100%，它的左边界就是容器左边缘。负百分比值始终以父容器宽度为基准，所以 margin-left: -100% 等价于“向左移动一个容器宽”。这一步只是定位起点，后续还得靠 .main 的 margin 预留空间，否则左栏会完全盖住主内容。
.main 的 margin 必须手动匹配侧栏宽度
这是双飞翼和圣杯最根本的区别：双飞翼不靠 .container 的 padding 预留空间，而靠 .main 自身的左右外边距腾出位置。假设左栏宽 200px、右栏宽 220px，则必须写：
.main {
margin: 0 220px 0 200px;
}
- 这个值不能用百分比或
auto，否则侧栏无法精准嵌入空白区 - 改一个侧栏宽度，
.main的margin-left和margin-right必须同步改，漏改就重叠或留白 - 如果侧栏要加
border或box-shadow，记得把它们的尺寸也计入margin值，否则视觉上会溢出
为什么 .left 用 margin-left: -100% 而不是 -200px
因为 .left 要在不同容器宽度下都紧贴 .main 左边缘，而 -100% 是相对父容器计算的，能随容器缩放保持对齐；-200px 是固定偏移，在响应式场景下容易错位。但注意：
-
.left和.right必须和.main同级、同 float 方向（通常都是float: left） -
.left的width仍得设成200px，不能依赖margin推算宽度 - IE6/7 对
margin-left: -100%支持不稳定，若需兼容，得 fallback 到固定像素值 + 条件注释
清除浮动时别只靠 overflow: hidden
.container 设 overflow: hidden 确实能触发 BFC 清除浮动，但它会意外裁剪子元素的 box-shadow、transform 溢出或 position: absolute 元素。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用伪元素清除：
.container::after { content: ""; display: table; clear: both; } - 或者给
.container加display: flow-root（现代浏览器支持良好，且无裁剪副作用） - 若必须用
overflow: hidden，请确认侧栏没有需要外溢的装饰效果
双飞翼真正的麻烦点不在写法本身，而在宽度耦合——三个地方（.main margin、.left width、.right width）只要有一个没对齐，整个布局就 visibly broken，而且错误往往不报错，只悄悄错位。
