overflow: hidden 能撑开父容器是因为触发BFC，使父容器包含浮动子元素高度；但会裁剪溢出内容，推荐用display: flow-root替代。
overflow: hidden 为什么能撑开父容器
它不是“撑开”，而是触发了 BFC（块级格式化上下文），让父容器开始参与浮动元素的高度计算。浮动元素脱离文档流，父容器默认无视它们的高度；而 BFC 容器会把内部浮动元素纳入自身高度计算范围。
常见错误现象：父容器高度为 0、背景色/边框不显示、后续元素向上塌陷。
-
overflow: hidden是最常用手段，但副作用是可能意外裁剪溢出内容（比如下拉菜单、阴影、绝对定位偏移） - 其他触发 BFC 的方式包括：
display: flow-root（推荐，无裁剪风险）、float: left（父容器自己也浮动，通常不适用）、position: absolute（脱离文档流，更不可取） -
overflow: auto和hidden效果一致，但可能在不需要滚动的场景下出现多余滚动条（尤其 Safari）
display: flow-root 是更干净的替代方案
这是现代 CSS 中专为解决此问题设计的值，语义明确、无副作用。它只创建 BFC，不改变溢出行为，也不影响布局流。
使用场景：需要清除浮动又不想隐藏内容、做组件封装时追求可预测性、维护长期项目。
立即学习“前端免费学习笔记（深入）”；
- 兼容性：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；IE 完全不支持
- 写法简单：
div { display: flow-root; }，比overflow: hidden更直观表达“我要包含浮动子元素” - 如果必须兼容老版本 IE，仍需回退到
overflow: hidden或伪元素清除法（::after+clear: both）
伪元素清除法（clearfix）还值得用吗
在不支持 flow-root 且不能用 overflow 的场景下，它仍是可靠选择，尤其适合需要精确控制清除位置或复用样式类的项目。
常见错误现象：::after 没加 content: ""、忘记设 display: table 或 block、未声明 clear: both。
- 标准写法：
.clearfix::after { content: ""; display: table; clear: both; } - 注意
display: table是关键——它让伪元素成为块级盒并参与 BFC 创建；仅用block在某些旧浏览器中不够稳定 - 性能无明显差异，但代码量略多，维护成本略高；现代项目优先考虑
flow-root
哪些情况 overflow: hidden 会悄悄坏事
它看似简单，但容易掩盖真实问题，比如遮住 tooltip、截断动画位移、吞掉 box-shadow 或 transform 偏移内容。
使用场景判断：当父容器本身就有明确宽高限制、且你确认内部绝不会有溢出需求时才安全。
- 典型翻车点：
position: relative容器里有position: absolute子元素超出边界，被裁掉 - 下拉菜单、日期选择器、Popper.js 类浮层，在
overflow: hidden父级下直接消失 - Flex 或 Grid 容器内部用了浮动？别用
overflow: hidden清除——应改用原生布局方式，浮动本就不该和它们混用
真正复杂的点不在“怎么清”，而在“为什么这里有浮动”。很多时候，换用 flex 或 grid 能一劳永逸避开这个问题。
