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