用 display: flex 实现三栏布局最稳，父容器设 display: flex 且 flex-direction: row，左右固定宽（flex: 0 0 240px/180px），中间 flex: 1 并加 overflow: auto；IE11 需写为 flex: 1 1 0 并补 min-width: 0。
用 display: flex 实现三栏布局最稳
现代浏览器下，display: flex 是唯一既不用计算宽度、也不依赖 float 或 position 黑魔法的可靠方案。它天然支持“左右固定 + 中间自适应”，且 DOM 顺序自然，无障碍和 SEO 友好。
常见错误是给中间区域设 flex: 1 却忘了父容器没设 display: flex，或者把 flex-direction 错设成 column —— 这会导致三栏垂直堆叠。
- 父容器必须设
display: flex，且保持默认flex-direction: row - 左侧/右侧区域设固定宽度（如
width: 200px）或flex: 0 0 200px（更稳妥，防止被压缩） - 中间区域只设
flex: 1，不设 width，否则会覆盖弹性行为 - 若中间内容超长需滚动，记得加
overflow: auto，且父容器要有明确高度或 min-height
.container {
display: flex;
}
.left { flex: 0 0 240px; }
.right { flex: 0 0 180px; }
.main { flex: 1; overflow: auto; }
IE11 下 flex: 1 失效怎么办
IE11 对 flex: 1 解析有 bug：当兄弟元素没设 flex-basis 时，它可能完全不占空间。这不是兼容性开关问题，而是渲染引擎缺陷。
使用场景集中在企业内网系统，用户无法升级浏览器。别试图用 -ms-flex 前缀硬改，那只会引入更多不一致。
立即学习“前端免费学习笔记（深入）”；
- 把中间区域的
flex: 1拆成显式三值：flex: 1 1 0（即flex-grow: 1,flex-shrink: 1,flex-basis: 0） - 确保左右两侧也用完整写法，比如
flex: 0 0 240px，避免 IE 解析成flex: 0 1 auto - 如果仍塌陷，临时补一行
min-width: 0到中间区域——IE 对 flex 项的最小尺寸计算逻辑异常，这行能重置它的内部约束
grid 布局写法简洁但要注意兼容边界
用 display: grid 写三栏确实更直白：grid-template-columns: 240px 1fr 180px。但它在 Safari 10.1 之前、所有 IE 版本中完全不可用，不是“部分不支持”，是直接回退成块级流。
如果你的项目已明确放弃 IE 和老 Safari（比如只跑在 Electron 14+ 或 Chrome 90+ 环境），那 grid 是首选：代码少、逻辑平、响应式改起来也快。
- 不要混用
grid和flex在同一容器——比如一边用grid-column，一边又想靠margin: auto居中，行为不可控 -
1fr不等于100%：它按剩余空间等分，若左右设了minmax(240px, 240px)，中间1fr就真只是“剩下的全部” - 想让中间区域最小宽度可控？用
minmax(320px, 1fr)，比 JS 监听 resize 更轻量
.container {
display: grid;
grid-template-columns: 240px minmax(320px, 1fr) 180px;
}
为什么不用 float 或 position: absolute
这两种方案现在只剩历史包袱价值。它们的问题不是“写不出来”，而是“改一次就崩一次”。
float 的典型错误现象是：中间区域高度撑不开父容器，导致下方内容上浮；或者响应式断点里一改 width，就得同步调 clear 和 margin，极易漏掉某处。
position: absolute 更危险——它把中间区域从文档流踢出去，意味着所有相对定位、z-index 层级、甚至 scrollIntoView() 都可能失效。
-
float要配overflow: hidden或伪元素清除浮动，但后者在 Flex/Grid 容器里根本不起作用 -
position: absolute的 left/right 值一旦写死像素，就彻底失去响应能力；用百分比又得反复算减法，比如left: 240px; right: 180px在窄屏下直接重叠 - 两者都不支持
gap，想加间距只能靠 padding/margin，但 margin 会触发外边距合并，padding 又吃内容空间
min-width 和 overflow 组合。很多人只写 flex: 1，结果表格或长单词把布局顶破，或者滚动条出不来——这不是布局失效，是内容层没兜住。 
