圣杯布局现在不用 Float，因 flex 和 grid 原生支持多栏流式、等高、自适应，代码更简、调试更易；float 实现需手动清浮动、负 margin、padding 预留等复杂操作，易错且维护难。
圣杯布局为什么不用 float 了
现在还用 float 实现圣杯布局，等于主动给自己加障眼法。它确实能跑通，但前提是：你得手动清除浮动、计算负 margin、给父容器设 padding、再额外套三层数层 dom —— 稍微改个宽度或加个内边距，三栏就错位。浏览器早就不靠 float 做布局了，display: flex 和 display: grid 原生支持多栏流式、等高、自适应，代码量少一半，调试时间少八成。
flex 圣杯布局的最小可行写法
核心就三步：父容器设 display: flex，主内容区用 flex: 1 占剩余空间，左右栏固定宽。不需要 position、不依赖文档流脱离、不碰 margin 抢位。
body { display: flex; min-height: 100vh; } #left { width: 200px; } #main { flex: 1; } #right { width: 200px; }-
#main必须放在 HTML 中间位置（即 DOM 顺序是 left → main → right），否则flex: 1不会按预期撑开 - 如果要求左栏在视觉上最左、右栏最右、主内容居中，但 HTML 顺序不能变（比如 seo 或可访问性要求），就得加
order属性调整渲染序，而不是挪标签 - IE10+ 支持
flex，但 IE10 的flex: 1有 bug，建议显式写成flex: 1 1 auto
grid 实现更直白，但要注意显式定义行
grid 写圣杯，本质就是划三列 + 指定区域名，比 flex 还少动脑。但新手常漏掉 grid-template-rows，导致高度塌陷 —— 尤其当主内容没内容时，整个布局“看不见”。
.container { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: 100vh; /* 关键：不设这行，高度可能为 0 */ grid-template-areas: "left main right"; } #left { grid-area: left; } #main { grid-area: main; } #right { grid-area: right; }- 不设
grid-template-rows，容器高度由子元素撑开；设成100vh才能满屏，这是和flex的关键差异点 -
1fr不等于flex: 1：它只分配剩余空间，不处理内容溢出；若#main里有超宽表格，仍会横向滚动，需额外加min-width: 0 - Firefox 对
grid-template-areas的换行解析更严格，空格/换行不一致可能导致解析失败，建议写成单行
面试时被问“浮动圣杯”，答什么才不露怯
别现场手写三套 float + margin + position 组合。直接说：我知道传统写法要靠负 margin 拉回主栏、父容器 padding 预留侧栏位置、clearfix 清浮动，但这些是为绕过 css 布局缺陷做的补丁。现在应该优先用 flex 或 grid，除非维护 IE9 以下老项目 —— 而那种项目，通常连 flex 都不许用，得上 JavaScript 模拟布局。
立即学习“前端免费学习笔记（深入）”；
真要写浮动版，唯一值得提的细节是：主内容区必须写在 HTML 最前面，否则负 margin 拉不动。这个顺序反直觉，恰恰说明它是 hack，不是设计。
复杂点从来不在怎么写，而在为什么当年非得这么写 —— 浏览器不支持自然流式分栏，才逼人用浮动“借位”。现在那个约束早就没了。