真正起作用的机制是display: grid或display: flex，因float和position: absolute均脱离文档流，无法建立高度联动；前者致父容器塌陷，后者使元素完全失联，等高仅靠hack且不可靠。
左右侧边栏等高不是靠“单独设置高度”，而是靠父容器的布局上下文强制拉伸——display: grid 或 display: flex 才是真正起作用的机制，其他方案（如 float、position: absolute）本质上做不到可靠等高。
为什么 float 和 position: absolute 无法保证左右栏等高
浮动元素脱离文档流，父容器高度塌陷；绝对定位元素完全退出布局流，彼此之间无高度关联。所谓“看起来等高”，只是巧合或靠 JS/伪元素 hack 补救，内容一变就错位。
-
float下左右栏各自按内容撑开，中间栏用margin挤出空间，但三者高度互不影响 -
position: absolute的左右栏与中间栏毫无尺寸联动，谁高谁矮全凭内容，且无法响应父容器高度变化 - 哪怕给左右栏都写
height: 100%，若父容器没明确高度上下文（比如没设min-height或内容未撑开），结果仍是 0 高度
display: flex 下左右栏等高的关键写法
父容器设 display: flex 后，子项默认在交叉轴（垂直方向）上拉伸，但必须满足几个隐含条件才能触发等高。
- 父容器不能有
height固定值（如height: 400px），否则会限制拉伸上限；推荐用min-height: 100vh - 左右栏别只写
width: 200px，而要用flex: 0 0 200px——确保不放大、不缩小、宽度锁定 - 中间栏必须用
flex: 1（等价于flex: 1 1 0%），不是flex: 1 1 auto；后者以内容宽度为基准，在长文本或图片下可能压缩左右栏 - 左右栏不能设
align-self: flex-start或height，否则主动退出拉伸行为
display: grid 下左右栏等高的最简实现
grid-template-columns 是唯一一行定义结构、天然等高的方案，左右栏是否等高，根本不需要额外干预。
- 父容器写
display: grid+grid-template-columns: 200px 1fr 200px，三栏就在同一行轨道里，高度由最高项决定，自动等高 - 必须配
min-height: 100vh或足够内容撑开父容器，否则空时三栏会塌成一条线 - 用
gap: 12px控制列间距，别用margin——后者会干扰网格线计算，还可能触发 margin collapse - IE11 不支持
1fr和gap，真要兼容，得改用grid-column-gap+ 像素值列宽（如200px 500px 200px）
容易被忽略的盒模型陷阱
等高失效，十次有八次是因为盒模型没统一，而不是布局语法写错了。
- 全局漏掉
* { box-sizing: border-box; }，导致width: 200px+padding: 12px实际占 224px，列宽溢出、换行、高度错乱 - 左右栏内部有长单词或大图，没加
word-break: break-word或min-width: 0，强行撑破容器宽度，破坏网格/弹性流 - 在 Grid/Flex 子项上混用
float或position: absolute，它们直接退出布局流，调试时根本找不到原因
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
