overflow: hidden 或 auto 通过触发bfc使父容器包含浮动子项高度，避免塌陷；但无法解决浮动子项自身高度不一致问题，后者需用flex/grid布局或内容控制。
直接结论：overflow: hidden 或 overflow: auto 能让父容器“看见”浮动选项卡的真实高度，从而避免塌陷导致的视觉错位；但它不解决选项卡自身高度不一致的问题——那得靠内容控制或换布局。
为什么 overflow 能“修复”高度塌陷
浮动选项卡（比如 .tab-item）脱离文档流后，父容器（.tab-container）计算高度时直接忽略它们，结果常为 height: 0。加 overflow: hidden 是触发 BFC（块级格式化上下文）最轻量的方式，BFC 区域会强制包含内部浮动元素的实际尺寸。
- 必须加在父容器上，不是子项——
.tab-container { overflow: hidden; } -
overflow: auto效果相同，但可能意外出现滚动条（尤其当子项有负 margin 或绝对定位偏移时） - IE6/7 需补
zoom: 1，现代项目基本不用管 - 别用
overflow: visible（默认值），它不触发 BFC
overflow 不能解决的真问题：选项卡自身高度参差
即使父容器撑开了，如果每个 .tab-item 内容行数不同（比如一个只有标题，另一个带描述+图标），它们视觉上依然高低不平——overflow 对这个完全无效。
- 常见表现：选项卡底部对不齐、切换时“跳动”、右下角按钮位置飘忽
-
line-height统一只能拉齐单行文本的行框，多行段落仍会撑开不同高度 - 用
height: 40px硬设会截断内容或留白，min-height只兜底，不拉齐 - 真正对齐底部需改用
display: flex+align-items: flex-end，或 Grid 的align-items: stretch
什么时候该放弃 overflow + float
如果你正在写新项目，或选项卡需要响应式、支持动画、底部按钮对齐、内容动态加载——继续用 float 就是给自己埋坑。
- Flex 替代方案只需三行：
.tab-container { display: flex; flex-wrap: wrap; }+.tab-item { flex: 0 0 auto; }+align-items: flex-end（底部对齐）或align-items: stretch（等高） - Grid 更适合固定列数：
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))+align-items: stretch - 注意 IE10–11 对
flex: 1支持不全，要展开写成flex-grow: 1; flex-shrink: 1; flex-basis: 0% - 旧代码里残留的
float: left必须删干净，否则嵌套在 flex 容器里反而破坏对齐
最容易被忽略的是：overflow 触发 BFC 后，如果父容器本身需要显示下拉菜单、Tooltip 或阴影溢出，hidden 会把它们裁掉——这时候 display: flow-root 才是语义正确且无副作用的替代，但得确认 Safari 15.4+ 和 Chrome 64+ 的兼容范围是否覆盖你的用户群。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
