float三栏布局必须用负margin，因为浮动元素脱离文档流导致右侧两栏下移，需用负margin将main栏“拽回”同一行；main须在HTML最前、三栏均float:left、父容器清除浮动。
float三栏布局为什么必须用负margin
因为浮动元素脱离文档流，右侧两栏会掉到左栏下方，不靠负margin把它们“拽”回同一行就无法并排。核心是让中间内容区先占满整行（width: 100%），再用负边距把它左侧的空档“覆盖”掉，给左右侧栏腾出位置。
常见错误现象：left和right栏确实浮起来了，但main栏卡在它们下面，整个页面只剩一栏显示。
-
main必须放在 HTML 结构最前面，否则负 margin 会失效 -
left需margin-left: -100%，right需margin-left: -200px（假设宽200px）——顺序不能反 - 所有三栏都要加
float: left，包括main - 父容器必须清除浮动（
overflow: hidden或伪元素），否则高度塌陷
圣杯布局中各栏宽度怎么设才不重叠
关键不是“设多宽”，而是“留多少空间”。中间栏用 width: 100% 占满父容器，左右栏靠负 margin 挤进去，所以它们的 width 可以自由定（比如 200px），但必须配合精确的负值，否则会错位或盖住内容。
使用场景：需要固定侧边栏宽度、中间自适应的后台管理页或老项目兼容需求。
立即学习“前端免费学习笔记（深入）”；
-
left宽度为200px→margin-left: -100%把它拉到最左 -
main内部需加margin: 0 200px（左右留白），否则文字会被侧栏遮住 -
right宽度为180px→margin-left: -180px，且必须写在left之后，否则层叠顺序出错 - 如果改了侧栏宽，
main的margin和负margin值必须同步改，漏一个就乱
IE6/7下float圣杯布局崩了怎么办
老IE对 width: 100% + float 的解析有 bug，会导致 main 栏宽度计算异常，直接撑破容器。这不是代码写错了，是渲染引擎限制。
性能 / 兼容性影响：现代浏览器完全没问题，但只要目标还含 IE7，就得加 hack —— 不是优化，是救命。
- 给
main加display: inline（IE6/7 特供） - 给父容器加
*zoom: 1触发 hasLayout - 避免在
main上用min-width，IE6 不识别 - 侧栏不要用
position: relative，会干扰 float 流程
为什么现在没人用float圣杯布局了
不是它错了，是它太拧巴：结构必须反序、负 margin 值要手算、响应式几乎没法做、可访问性差。Flexbox 一行 display: flex 就能替代全部逻辑，还不用操心清除浮动。
容易被忽略的地方：即使你只是维护旧项目，也要注意 main 的 margin 是内容安全区，不是布局工具——很多人误把它当 padding 用，结果侧栏一变宽，文字就贴边了。
