圣杯布局必须用margin-left: -100%和margin-left: -200px，因HTML中.center需语义前置，而视觉须居中；前者将左栏拉回容器起点（相对父宽计算），后者将右栏精准拉至中间右侧边界（像素值严格匹配其宽度），是唯一不依赖绝对定位、不破坏文档流的视觉重排方案。
现在写三栏布局，display: flex 或 display: grid 一行 CSS 就能搞定，float + 负边距的圣杯/双飞翼方案已无实战必要——只在维护老项目、应付面试或调试 IE6 兼容逻辑时才真会用到。
为什么必须用 margin-left: -100% 和 margin-left: -200px
核心是绕过文档流顺序限制：HTML 中 .center 必须写在最前（语义优先），但视觉上要居中，左右栏得“塞”进它两侧。仅靠 float: left 会让三列从左到右排成一行（center→left→right）；而 margin-left: -100% 把 .left 拉回容器起点，margin-left: -200px 把 .right 拉回 .center 右侧边界——这是唯一不依赖 position: absolute、不破坏语义流的“视觉重排”手段。
-
margin-left: -100%是相对父容器宽度计算，适配不同屏幕；margin-left: -200px是像素值，必须和右侧栏实际宽度严格一致 - IE6 不支持
margin-right: -100%，所以右侧栏不能也用百分比，必须用固定像素值 - 若侧栏宽度动态变化（比如响应式改了
width），这个-200px就立刻失效，布局错位
overflow: hidden 不是为了隐藏溢出，而是触发 BFC
所有子元素都 float 后，.container 高度会塌陷为 0——因为浮动元素脱离了正常文档流。加 overflow: hidden 是为了触发块级格式化上下文（BFC），让容器“感知”到浮动子元素的高度。在现代浏览器里它只是顺带触发 BFC；但在 IE6 中，它还同时触发 hasLayout，这是当时唯一可靠的清浮动方式。
- 别用
overflow: auto替代——某些旧版 IE 下可能意外出现滚动条 -
zoom: 1是 IE6 专用替代方案，但现代项目里基本不用 - 如果容器本身需要内容溢出（比如带横向滚动的图表区），就不能用
overflow: hidden，得换其他 BFC 触发方式（如display: flow-root），但那又不兼容 IE6
圣杯 vs 双飞翼：padding 预留空间 和 margin 推开内容 的区别
圣杯把左右 padding 加在 .container 上，靠父容器“腾位置”；双飞翼则把 .center 包一层 .inner，用 margin-left/margin-right 推开内容。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 圣杯的
.center子元素会受父容器padding影响，若未设box-sizing: border-box，内边距叠加可能导致意外水平滚动条 - 双飞翼的
.inner更干净，内容区域完全可控，但 DOM 多一层嵌套，JS 查询需多走一步（比如document.querySelector('.center .inner')） - 两者都要求
body设置min-width（如min-width: 600px），否则窄屏下负边距会把侧栏拉出视口，造成横向滚动
真正容易被忽略的不是怎么写，而是「为什么非得这么写」——这些约束几乎全是 IE6 渲染缺陷倒逼出来的补丁。今天照着教程抄代码，不理解 margin-left: -100% 和 overflow: hidden 在当年分别对抗的是什么 bug，就很难在老项目里快速定位 layout 塌陷或侧栏消失的问题。
