margin-left: -100% 是以父容器宽度为基准向左移动一个容器宽，使.left左边界对齐.main左边界；其作用非吸附视口边缘，且需与.main的精确像素margin配合实现双飞翼布局。
为什么 margin-left: -100% 不是“把左栏拉到屏幕最左边”
它的真实作用是让 .left 的左边界对齐 .main 的左边界——而 .main 宽度为 100%，其左边界就是父容器左边缘。所以 margin-left: -100% 实质是以父容器宽度为基准，向左移动一个容器宽。
常见错误是以为负百分比能“撑开”或“吸附”到视口边缘，结果发现左栏在缩放时错位、或和 .main 重叠。这是因为：
-
-100%是相对父容器计算的，不是相对于视口或自身宽度 - 若父容器宽度动态变化（如响应式容器），固定像素值（如
margin-left: -200px）会失效 - 该偏移仅完成定位起点，不负责腾出空间——腾空间靠的是
.main的margin
.main 的左右 margin 必须手动匹配侧栏宽度
双飞翼布局中，.main 的 margin-left 和 margin-right 是唯一预留侧栏位置的手段。它不能用 auto 或百分比，必须是精确像素值。
假设左栏 width: 200px、右栏 width: 220px，则必须写：
.main {
margin: 0 220px 0 200px;
}
容易踩的坑：
- 改了
.left的width却忘了同步更新.main的margin-left，导致左栏盖住内容或留白 - 侧栏加了
border: 1px solid或box-shadow，但没把这 2px 宽度计入margin值，造成视觉溢出 - 误用
padding替代margin——双飞翼不靠父容器padding预留空间，那是圣杯布局的做法
浮动元素顺序与清除方式直接影响布局稳定性
.left、.main、.right 必须同级且都设 float: left，且 HTML 中 .main 必须写在最前面——这是双飞翼能成立的前提：先渲染主内容，再用负 margin 把侧栏“拽”上来。
清除浮动时，别只依赖 overflow: hidden：
- 它会裁剪
box-shadow、transform溢出部分，以及position: absolute子元素 - 更稳妥的是伪元素清除：
.container::after { content: ""; display: table; clear: both; } - 现代项目可直接用
display: flow-root，无裁剪副作用，兼容性已覆盖 Chrome 64+/Firefox 59+/Safari 15.4+
IE6/7 兼容场景下负百分比不可靠
在旧版 IE 中，margin-left: -100% 渲染不稳定，常出现偏移量不准或完全失效。此时必须降级为固定像素值，并配合条件注释或 CSS hack：
/* IE6/7 fallback */
.left {
*margin-left: -200px; /* IE7 及以下识别 */
_margin-left: -200px; /* IE6 专属 */
width: 200px;
}
但要注意：这种写法会让布局失去响应能力。如果仍需适配旧 IE，建议整套布局用固定宽度 + 像素级 margin，放弃百分比方案。
真正的麻烦点不在语法本身，而在三处宽度耦合：.left width、.right width、.main margin——任意一处数值不一致，布局就悄悄错位，且浏览器不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
