overflow: hidden 能让父容器包裹浮动子元素，是因为它触发了BFC，使父容器重新计算高度包含浮动元素；但会裁剪溢出内容，非最优解。
为什么 overflow: hidden 能让父容器包裹浮动子元素
浮动元素会脱离文档流，导致父容器高度塌陷——这是 CSS 布局中最常被误解的“bug”之一。而 overflow: hidden 并不是专门为此设计的修复手段，它只是触发了父容器的 BFC（块级格式化上下文），而 BFC 容器天然会包含其内部的浮动元素，从而“撑开”高度。
关键点在于：不是 hidden 这个值本身起作用，而是任何非 visible 的 overflow 值（如 auto、scroll、hidden）都会触发 BFC。
-
overflow: visible是默认值，不创建 BFC，父容器无法感知浮动子元素高度 -
overflow: hidden创建 BFC，父容器重新计算高度，包含浮动子元素 - 注意：若子元素实际溢出（比如文字超长或绝对定位偏移），
hidden会导致内容被裁剪，这是副作用而非预期效果
比 overflow: hidden 更安全的替代方案有哪些
当父容器确实可能有内容溢出（例如下拉菜单、tooltip、横向滚动区域），用 hidden 就会出问题。此时应优先考虑更语义清晰、副作用更少的方式：
-
overflow: auto：同样触发 BFC，且只在必要时显示滚动条，视觉干扰小；但需注意某些浏览器对空内容仍渲染滚动条（可通过overflow: overlay或 JS 检测规避） -
display: flow-root：现代标准方案，专为创建无副作用 BFC 设计，不会影响溢出行为，兼容性已覆盖 Chrome 64+ / Firefox 58+ / Safari 15.4+ -
伪元素清除法：
::after { content: ""; display: table; clear: both; }—— 兼容性最好（IE8+），不改变 overflow 行为，但增加样式复杂度
哪些场景下 overflow: hidden 反而会引发新问题
看似简单的修复，实际容易掩盖布局隐患：
