浮动侧边栏无法等高是因为float脱离文档流导致父容器无法感知其高度，height:100%失效；唯一可靠解法是用display:flex+align-items:stretch，并注意内容溢出和尺寸约束。
浮动侧边栏无法自适应主体内容高度，不是样式写错了，而是 float 本身就不支持等高对齐——你再怎么调 height: 100% 或 min-height 都不会生效，因为父容器根本“看不见”浮动子项的高度。
为什么 height: 100% 在 float 布局里完全无效
这个百分比高度依赖父元素有明确的计算高度，但 float 元素脱离文档流后，父容器高度通常由其他非浮动内容撑开（或直接塌陷为 0），形成死循环：想让侧边栏高一点 → 需父容器有高度 → 但父容器高度又依赖侧边栏……结果就是侧边栏永远只按自己内容高度显示。
- 常见现象：
.sidebar里只有两行文字，.main区域却有 800px 高，但侧边栏仍卡在 60px - 加
overflow: hidden或display: flow-root只能修复父容器塌陷，不解决侧边栏“等高”问题 -
vertical-align对 float 元素完全无效，别试
用 display: flex 替代 float 是唯一可靠解法
Flex 布局的 align-items: stretch（默认行为）才是真·等高机制，前提是父容器有可计算高度。
- 外层容器必须设
display: flex+min-height: 100vh（不是height: 100vh，防内容超长时滚动失效） - 侧边栏写
flex: 0 0 240px，不参与缩放，但会自动拉伸到容器高度 - 主内容区写
flex: 1，不要加width或height，否则干扰 stretch - 若侧边栏内部有
position: absolute子元素，加min-height: 1px防止 stretch 失效
如果必须保留 float，只能靠 JS 或 calc() 补救
这不是推荐方案，但老项目有时绕不开。两种补救方式都带明显缺陷：
- JS 监听
.main高度变化，再赋值给.sidebar—— 性能差、易漏触发、移动端 resize 时容易错位 - 用
height: calc(100vh - 64px)（假设顶部导航高 64px）—— iOS Safari 滚动时地址栏隐藏/显示会动态改vh，导致侧边栏突然跳变 - 千万别把
overflow-y: auto加在父容器上，得加在.sidebar自身，并配max-height: calc(100vh - 64px)
真正难处理的不是代码怎么写，而是侧边栏里一张没设 max-width 的图片、一个没约束的表格，都会偷偷撑开整个 Flex 容器，让“等高”变成“错位”。检查时先用 outline: 1px solid red 看真实占位，比盯着 align-items 有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
