圣杯布局浮动实现必须用负边距，因浮动元素脱离文档流，中间区设width:100%会被左右栏挤出视口；负边距使中间区预留空间并“拉回”左右栏，结构须为main→left→right，父容器需padding和bfc触发。
圣杯布局的浮动实现为什么必须用负边距
因为浮动元素脱离文档流，中间内容区如果直接设 width: 100%，会被左右浮动栏挤出视口——它“看不见”左右栏的存在。负边距是唯一能让中间区主动“后退”、腾出左右位置的手段。
关键点在于：中间区要先通过 margin-left 和 margin-right 预留左右栏宽度，再用负边距把左右栏“拉回”到中间区上方；同时左右栏需用 position: relative 微调位置，否则会和中间内容重叠。
- 左栏加
margin-left: -100%，再position: relative; left: -200px（假设宽200px） - 右栏加
margin-left: -200px（等于自身宽度），再position: relative; right: -200px - 中间区必须放在 HTML 结构最前面，否则负边距无法生效
HTML结构顺序不能错：中间区必须写在最前
浮动布局依赖文档流顺序和负边距的“拉回”逻辑。如果左栏或右栏写在中间区前面，它们会先占据浮动位置，中间区再怎么设 margin 都无法覆盖其原始浮动占位。
正确顺序只能是：main → left → right（三者同级），且都包裹在同一个父容器内。
- 错误写法：
<div class="left"></div> <div class="main"></div> <div class="right"></div> - 正确写法：
<div class="main"></div> <div class="left"></div> <div class="right"></div> - 父容器必须设
padding-left: 200px和padding-right: 200px，否则左右栏会被裁掉
为什么右栏要用 margin-left 而不是 margin-right
因为右栏浮动后默认贴右边界，margin-right 对它无效；而 margin-left: -200px 才能把它从右边界往左“拽”进中间区右侧空隙里。
这个 -200px 不是随便写的，它必须严格等于右栏自身的宽度（比如 width: 200px），否则会出现错位或重叠。
- 左栏靠
margin-left: -100%拉到最左，再用left微调 - 右栏靠
margin-left: -200px拉进中间区右边，再用right微调 - 所有浮动元素必须设
float: left，包括中间区（否则不参与同一行浮动流）
兼容性与现代替代方案的现实提醒
这套写法在 IE6–8 能跑，但现代项目里几乎没人真用——float + position + negative margin 组合太脆弱：任意一个值算错、父容器没清浮动、字体加载延迟导致高度变化，都会让整个布局错乱。
真正上线时，除非维护老系统，否则直接上 display: flex 或 display: grid。圣杯布局的浮动实现，现在只适合理解“浏览器如何解析浮动流”，或者应付某些奇葩的 legacy CMS 模板限制。
容易被忽略的一点：父容器必须触发 BFC（比如加 overflow: hidden），否则浮动子元素会塌陷，高度为 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
