最稳三栏结构用 grid-template-columns: 200px 1fr 240px，左栏固定、中间自适应、右栏固定；需设父容器高度上下文、用 gap 而非 margin、避免 float/absolute；移动端须用媒体查询重写列定义或改方向。
用 display: grid 一行定义三栏结构最稳
现代项目里，grid-template-columns: 200px 1fr 240px 是首选写法——左栏固定 200px、中间自适应、右栏固定 240px。1fr 不是百分比，而是“拿走所有剩余空间”，行为和 flex: 1 一致，且天然等高、不依赖 DOM 顺序。
必须注意两点：父容器得有高度上下文（比如 min-height: 100vh），否则空内容时三栏会塌成一条线；列间距统一用 gap: 12px，别用 margin，后者会干扰栅格计算，还可能触发 margin collapse。
- IE11 不支持
gap和1fr，真要兼容就切回display: flex，或改用grid-column-gap+ 具体像素值 - 想让中间栏最小宽度 300px？把
1fr换成minmax(300px, 1fr) - 别在 Grid 容器里给子项加
float或position: absolute，它们会直接退出布局流，调试时根本找不到原因
flex: 1 必须写对，否则中间栏不占满
很多人写 flex: 1 1 auto，结果长文本或图片一进来，中间栏就被压缩甚至换行。这不是 bug，是预期行为：auto 以内容宽度为基准，而 flex: 1（等价于 flex: 1 1 0%）才真正让中间栏“从 0 开始分配剩余空间”。
左右栏推荐用 flex: 0 0 200px（不放大、不缩小、固定宽），比单纯 width: 200px 更稳妥；中间栏务必加 min-width: 0，防止内部长单词或未约束的 <img> 强行撑宽导致错位。
- 全局加
* { box-sizing: border-box; }，否则width: 200px+padding: 10px实际占 220px - 父容器别误加
justify-content: space-between，它插入的间隙会挤占可分配空间 - 别给中间栏同时写
width和flex: 1，后者会覆盖前者
移动端必须用 @media 切单列，不能靠 flex-wrap
小屏下三栏横向挤成一团，不是只改 grid-template-columns: 1fr 就完事。必须在 @media (max-width: 768px) 里显式重写列定义或改 flex-direction: column，否则布局逻辑还在横排。
Flex 场景下，光改方向不够，还得重置子项：加 flex: none; width: 100%，避免 flex: 1 继续拉伸导致竖排时留白；Grid 场景下直接写 grid-template-columns: 1fr 即可，三栏垂直堆叠。
- 别用
display: block覆盖 Grid/Flex 容器，会彻底破坏布局上下文 - 平板断点（768px–1024px）可只隐藏一侧边栏：
.sidebar-left { display: none; } - 如果主内容区语义上是
<main></main>，加order: -1让读屏器和搜索引擎优先识别它
为什么现在还用 float 就等于自找麻烦
看到老教程里 float: left + ::after 清浮动，基本可以判定这套方案已过时。问题不在“能不能跑”，而在维护成本。
float 元素脱离文档流，父容器高度塌陷是常态，必须手动补 overflow: hidden、zoom: 1 或伪元素清除——这些全是 hack，不是解法；DOM 顺序必须是左→右→中，否则 margin 值要重调；而语义化要求通常是“主内容优先”，flex 的 order 属性能天然解决。
- 加个
border或padding就可能换行，因为width不含盒模型增量，而flex/grid默认用box-sizing: border-box - 响应式下改
flex-direction: column一行搞定，float方案得重写整套margin和清除逻辑 - 真正难调的从来不是“怎么写出来”，而是当设计说“左栏要 240px、右栏缩到 80px、中间最小不能小于 300px”时，你能不能三秒内定位是改
flex-basis、加min-width，还是动flex-grow权重
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
