根本原因是float和absolute布局天生不支持等高对齐，只有flex或grid能通过align-items: stretch实现自动等高；float需bfc撑父容器但侧边栏仍不拉伸，absolute则完全脱离尺寸联动。
侧边栏高度不一致，根本不是内容问题，而是布局模型没选对
用 float 或 position: absolute 实现两栏时，侧边栏几乎必然和主内容高度不齐——这不是 bug，是这两种模型天生不提供“等高对齐”能力。Flex 布局下默认 align-items: stretch 才是解决高度自适应的底层机制。
float 布局中侧边栏为什么永远“塌”在顶部
float 元素完全脱离文档流，父容器若没触发 BFC（比如没加 overflow: hidden），高度直接坍缩为 0；即使加了 BFC，侧边栏自身高度也只由内容撑开，不会主动拉伸去匹配兄弟元素。
- 常见错误：给侧边栏写
height: 100%—— 它依赖父级有显式height，而 float 父容器通常没有 - 想强行拉高？只能靠 JS 监听主内容高度再赋值，或用伪元素 +
min-height模拟，但都不可靠 - 移动端适配时，
float在小屏上极易错行，且无法响应式切换为单栏（order不生效）
absolute 定位让侧边栏彻底“失联”，连 margin 都救不了
position: absolute 的侧边栏脱离文档流 + 脱离 flex/grid 上下文，它和主内容之间没有任何尺寸联动关系。此时所谓“自适应高度”，只能靠手动设 top/bottom 或 JS 计算，维护成本极高。
- 典型陷阱：给侧边栏设
top: 0; bottom: 0，看似填满，但一旦页面有固定头部（如header { position: fixed }），它就会被遮挡或溢出 - 如果主内容区用了
margin-left让出空间，这个值必须和绝对定位侧边栏宽度严格一致，否则错位 - IE11 及部分安卓 WebView 对
absolute+flex混用支持极差，容易导致侧边栏消失
真正能“自适应高度”的只有 Flex 和 Grid
别再硬套 float/absolute——它们解决的是“如何让元素不占位”，而你真正需要的是“如何让两个兄弟元素自动对齐高度”。Flex 是目前最稳的选择：
- 父容器必须设
display: flex+min-height: 100vh（不是height: 100vh，防内容超长） - 侧边栏写
flex: 0 0 240px，不参与缩放，但默认会 stretch 到容器高度 - 主内容区写
flex: 1，不要加width或height，否则干扰 stretch 行为 - 如果侧边栏内有绝对定位子元素，需加
min-height: 1px触发 BFC，否则 stretch 失效
复杂点在于：Safari 对 100vh 的动态解析、IE11 的 flex: 1 bug、以及滚动区域必须限制在侧边栏自身（max-height + overflow-y: auto），而不是父容器上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
