overflow:hidden不能真正防止溢出，仅通过触发BFC实现包裹与裁剪；真正解决需用display:flow-root或clearfix清除浮动，同时控制定位上下文、尺寸约束和层叠上下文。
overflow: hidden能让父容器“看起来正常”，但不是真正防止溢出，它只是裁剪 + 触发 BFC，治标不治本。真要防溢出，得从**浮动脱离文档流**这个根上动手。
为什么 overflow: hidden 常被误用？
加了之后父容器高度回来了、背景显示了，容易让人以为“问题解决了”。但它没清除浮动，只是靠触发 BFC 把浮动子元素“包进去”，同时把超出部分一刀切掉。
- 后续普通流元素仍会绕着浮动块排版（比如文字从右侧穿出）
-
position: absolute子元素（如 tooltip、下拉菜单）默认不被裁剪——除非父容器同时设了position: relative - 如果父容器宽度是
auto（比如没设width或max-width），overflow: hidden根本不生效，“超出”无从定义 - iOS Safari 中，
overflow: auto可能引发滚动卡顿，hidden则直接封死横向滚动需求
display: flow-root 是现代标准解法
它专为解决浮动塌陷设计，创建一个干净的 BFC，包裹浮动子元素、撑开高度，且不附带裁剪副作用。
- 写法极简：
.container { display: flow-root; } - 兼容性：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；IE 全系不支持
- 和
display: block的 margin 合并行为一致，内部浮动不再“逃逸” - 父容器仍可自由设置
overflow: visible、auto或其他值，不受干扰 - 若需兼容 Safari 14 或更早版本，不能单独依赖它，得搭配
@supports渐进增强
老项目必须兼容 IE 怎么办？用 .clearfix::after
这是最稳妥的兼容方案，核心是插入一个清除浮动的伪元素，强制父容器“收尾”。
- 必须三要素齐全：
content: ""（否则伪元素不生成）、display: table（或block，inline无效）、clear: both - 推荐写法：
.clearfix::after { content: ""; display: table; clear: both; } - 别只写
::after，旧版 Safari 需要::before和::after配合才能稳定触发 hasLayout - 避免在父容器上硬设
height或min-height，这会掩盖塌陷问题，误判清除成功
浮动图片 max-width: 100% 失效怎么办？
不是 CSS 写错了，而是浮动图片的“包含块”往往不是你写的那个父容器，而是视口或更上层定位祖先——没有明确宽度参照，100% 就算不出实际像素值。
- 必须同时满足两个条件：父容器有显式宽度（如
width: 100%或固定值）+ 创建 BFC（推荐display: flow-root） -
overflow: hidden虽能触发 BFC，但会裁剪box-shadow、旋转标签、绝对定位气泡等延伸内容 - 更优解：直接换用
display: flex，图片设flex: 0 0 auto+max-width: 100%，天然受父容器约束，无需float
真正容易被忽略的是：BFC 不是开关，它只管自己容器内的流与浮动关系；外部是否绕行、绝对定位是否被裁剪，全取决于你有没有同时控制好**定位上下文**、**尺寸约束**和**层叠上下文**这三件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
