现代三栏布局应优先使用flex或grid，而非float；因float本为文字环绕设计，用于布局会导致塌陷、清浮动、响应式等维护难题，而flex/grid语义清晰、响应灵活、维护成本低。
现在写 HTML 三栏圣杯布局，float + margin-left: -100% + overflow: hidden 这套组合依然能跑通，但只建议用于维护 IE6–9 的老项目或面试答题；真实项目中应直接用 display: flex 或 display: grid。
为什么必须用 margin-left: -100% 和 margin-left: -200px
因为 HTML 中 .center 必须写在最前（语义和 SEO 要求），但视觉上要居中——仅靠 float: left 会让它排第一，.left 排第二，.right 排第三，变成左→中→右的顺序。
-
margin-left: -100%是相对父容器宽度计算的，把.left拉回容器起点，让它“覆盖”在.center左侧 -
margin-left: -200px是像素值，必须和.right的实际宽度完全一致，才能把它精准塞进.center右侧预留空间 - IE6 不支持
margin-right: -100%，所以右侧栏不能也用百分比，否则渲染错乱
overflow: hidden 不是为了隐藏内容，而是触发 BFC
所有子元素都 float 后，.container 高度会塌陷为 0。加 overflow: hidden 是为了强制它形成块级格式化上下文（BFC），从而“感知”浮动子元素的真实高度。
- 在 IE6 中，它还顺带触发
hasLayout，是当时唯一可靠的清浮动方式 - 如果容器本身需要横向滚动（比如图表区），就不能用
overflow: hidden，得换display: flow-root，但那不兼容 IE6 -
overflow: auto在某些旧版 IE 下可能意外出现滚动条，慎用
圣杯 vs 双飞翼：padding 预留位置的两种思路
圣杯把左右 padding 加在 .container 上，双飞翼则把 .center 包一层 .inner，用 margin-left/margin-right 推开内容。
- 圣杯的
.center会受父容器padding影响，若没设box-sizing: border-box，可能引发意外水平滚动 - 双飞翼 DOM 多一层，JS 查询得写
document.querySelector('.center .inner')，但内容区域更可控 - 两者都要求
body设min-width（如min-width: 700px），否则窄屏下负边距会把侧栏拉出视口
真正容易被忽略的是：这套方案对 DOM 结构、CSS 属性值、浏览器渲染机制的耦合极深——-100%、-200px、overflow: hidden、position: relative 缺一不可，改任意一个都可能全盘失效。现代项目里，宁可花 10 分钟学 grid-template-areas，也不要花 2 小时调负边距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
