负 margin 本身不构成布局，它只是让浮动元素“破流”的扳手；真正起效的是 float + DOM 顺序 + 负 margin + padding/margin 留白的组合策略。单独写 margin-left: -100% 不会自动变成圣杯或双飞翼。
为什么 margin-left: -100% 必须配合 float: left 和 HTML 顺序？
负 margin 只在脱离标准流后才产生“横向拉回”效果：如果元素没浮动，margin-left: -100% 只会让它左移自身宽度的 100%，但仍在正常流里，无法和中间栏并排。
-
.main必须放在 HTML 结构最前面——这是内容优先加载的前提，也是负 margin 能生效的逻辑基础 -
.left和.right必须和.main同级、同为float: left，否则负 margin 拉动时找不到参照系 - 若把
.left放在.main前面，即使加负 margin，也会被.main的 100% 宽度直接挤到下一行，根本拉不回来
圣杯布局中 padding 与双飞翼中 margin 的分工差异
两者都靠负 margin 拉侧栏，但解决“中间内容被遮挡”问题的方式不同：
- 圣杯用父容器
padding-left/padding-right留白（例如.container { padding: 0 300px 0 200px; }），再靠position: relative微调侧栏位置 - 双飞翼不依赖父容器 padding，而是给
.main内部套一层.content，用.content { margin: 0 300px 0 200px; }内缩留白 - 结果上：圣杯的
.main视觉宽度被.container的 padding 压缩了；双飞翼的.main实际宽度仍是 100%，只是内容区被 margin 推开
IE6–8 下 position: relative 和 clear 的兼容性坑
老版本 IE 对相对定位计算不一致，尤其当侧栏混用 left/right 和 margin 时，容易错位或高度塌陷：
-
.left { margin-left: -100%; left: -200px; }在 IE6 中可能失效，建议统一用margin-left控制位置，避免混用 - 清除浮动不能只靠
:after，IE6–7 不支持伪元素，必须显式加<div style="clear: both;"></div>或用zoom: 1触发 hasLayout -
.container { overflow: hidden; }在某些 IE 场景下会意外裁剪绝对定位子元素，慎用
真正难的不是写出那几行负 margin，而是理解每个值的参照物是谁：-100% 是相对于父容器宽度，-200px 是相对于前一个浮动元素的右边界，而 padding-right: 300px 是给右侧留的静态空间。这三个数字一旦错位一个，整个布局就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
