margin-left: -100% 必须配合 float: left 和 DOM 顺序，因为负 margin 仅在脱离标准流后才产生横向位移；.main 需前置以保障 SEO 与首屏渲染，并为浮动侧栏提供参照边界。
为什么 margin-left: -100% 必须配合 float: left 和 DOM 顺序？
负 margin 不会自动“拉”元素到指定位置，它只在脱离标准流后才产生横向位移效果。如果 .main 没有 float: left，margin-left: -100% 只会让 .left 左移自身宽度的 100%，但仍在正常流里，根本无法和中间栏并排。
.main 必须写在 HTML 最前面——这不是为了“好看”，而是为了让浏览器先加载内容、利于 SEO 和首屏渲染；同时，浮动后的 .left 和 .right 才能以 .main 的右边界为参照系被负 margin “拽”上来。
-
.left的margin-left: -100%是相对于父容器宽度，目的是把它从第二行拉回第一行起始处 -
.right的margin-left: -300px（假设宽 300px）是相对于前一个浮动元素（即.main）的右边界，让它紧贴其右侧 - 若把
.left放在.main前面，即使加负 margin，也会被.main的width: 100%直接挤到下一行，根本拉不回来
圣杯布局中 padding 和双飞翼中 margin 的分工差异
两者都靠负 margin 拉侧栏，但解决“中间内容被遮挡”的方式完全不同：圣杯靠父容器 padding 预留空间，双飞翼靠子容器 margin 推开内容。
圣杯的 .container { padding: 0 300px 0 200px; } 是硬性留白，值必须严格等于左右栏宽度，否则视觉错位；而双飞翼的 .main .content { margin: 0 300px 0 200px; } 是内缩内容区，.main 本身仍是 100% 宽，只是内容被推开了。
- 圣杯需给侧栏加
position: relative+left/right微调，否则负 margin 只移动了“浮动起点”，元素仍会侵占中间内容 - 双飞翼不用相对定位，但 HTML 结构必须多一层嵌套：
- DOM 深度增加对 SSR 渲染或可访问性略敏感，但语义更清晰
IE6–8 下 position: relative 和清除浮动的兼容性坑
老版本 IE 对相对定位计算不一致，尤其当侧栏混用 left 和 margin-left 时，容易错位或高度塌陷。比如 .left { margin-left: -100%; left: -200px; } 在 IE6 中可能完全失效。
清除浮动也不能只靠伪元素 :after，IE6–7 不支持，必须显式加 或用 zoom: 1 触发 hasLayout。
- 慎用
.container { overflow: hidden; }：某些 IE 场景下会意外裁剪绝对定位子元素 - 推荐统一用
margin-left控制位置，避免混用left/right属性 - 等高问题别信“伪等高” hack（如
padding-bottom: 9999px），现代项目应直接用display: flex或grid
真正难的不是写负 margin，而是搞清每个值的参照物
-100% 是相对于父容器宽度，-200px 是相对于前一个浮动元素的右边界，padding-right: 300px 是给右侧静态预留的空间——这三个数字一旦错位一个，整个布局就偏了。
实际调试时最容易忽略的是：所有三栏必须同级、同为 float: left，且 .main 必须设 width: 100% 占满整行，否则浮动空间不足，侧栏根本“浮”不上去。
现在大多数项目已不必硬扛这些，但理解它们，才能看懂遗留代码里那些看似随意的像素值和百分比背后的真实逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
