圣杯布局不能只靠 float 实现，因其会导致父容器高度塌陷和左右栏无法贴合主内容；现代方案必须用 flex 或 grid，且需注意 min-height: 0、grid-column 定位及移动端隐藏侧栏的正确方式。
圣杯布局为什么不能只靠 float 实现
现代浏览器里用 float 做三栏圣杯（header + 左侧边栏 + 主内容 + 右侧边栏 + footer）会立刻遇到两个硬伤：一是浮动元素脱离文档流，导致父容器高度塌陷；二是左右栏无法真正“贴住”主内容区两侧，容易错位或重叠。哪怕加了 clear: both 或 overflow: hidden，也无法解决“中间内容优先渲染、左右栏不遮挡它”的核心诉求。
所以现在写圣杯布局，必须用更可控的方案——display: flex 或 display: grid 是唯二靠谱选择，其他方式要么兼容性差，要么维护成本爆炸。
用 Flex 实现时主容器必须设 min-height: 0
很多人写完 display: flex 发现左侧栏被撑开、内容溢出，问题往往出在主内容区域（比如 .main）的父容器没设 min-height: 0。Flex 项默认会按内容撑高，而圣杯要求中间区域自适应剩余高度，否则左右栏会被挤跑。
- 主容器（如
.container）需设display: flex和flex-direction: column - 内容区（
.content）外层再套一层.content-wrapper，并设flex: 1+min-height: 0 - 左右栏用
flex: 0 0 200px（避免缩放）+align-self: flex-start控制对齐
漏掉 min-height: 0 的后果是：当内容区有长表格或图片时，整个布局横向拉伸，右侧栏直接跑到下一行。
立即学习“前端免费学习笔记（深入）”；
Grid 版本要小心 auto-fit 和 minmax 的组合
用 display: grid 写圣杯最简洁，但 grid-template-areas 不适合动态宽度需求，真正实用的是 grid-template-columns 配合 minmax() 和 auto-fit。常见错误是写成：
grid-template-columns: 200px 1fr 200px;
这看似正确，但左右栏固定宽、中间强制占满，就不是“圣杯”了——圣杯的关键是中间内容优先，左右栏不抢空间。正确写法是：
grid-template-columns: minmax(200px, 25%) 1fr minmax(200px, 25%);
这样既保底 200px，又限制最大不超过 25%，主内容区始终有足够呼吸空间。同时记得给左右栏加 grid-column 显式定位，否则响应式断点下容易错乱。
移动端适配时不要盲目用 display: none
圣杯布局在小屏上必须重构，但直接对 .sidebar-left 加 display: none 会导致 JS 获取 offsetWidth 为 0、第三方组件（如地图、图表）初始化异常。更稳妥的做法是：
- 用
visibility: hidden+position: absolute把侧栏移出视口，保留 DOM 结构和尺寸计算能力 - 主内容区用
grid-column: 1 / -1占满整行 - 如果用了 Flex，改用
flex-direction: column并重置各子项flex值
很多项目卡在这里：PC 端正常，手机端打开页面白屏几秒——其实是侧栏隐藏后，某个依赖其宽度的轮播组件报了 NaN 错误，而不是样式问题。
