overflow: hidden 并非真正清除浮动，而是通过触发BFC使父容器包含浮动元素、解决高度塌陷；但会裁剪溢出内容，且在Flex/Grid中失效；推荐用display: flow-root替代，语义清晰无副作用，但IE不支持。
overflow: hidden 为什么能“清除”浮动
它其实不真清除浮动，只是触发了BFC（块级格式化上下文），让容器重新计算高度，把浮动元素包进来。这不是修复浮动本身，而是绕过它带来的高度塌陷问题。
常见错误现象：父容器高度为0、文字从图片下方“钻出来”、后续元素叠在浮动图上。
- 只对设置了
overflow且值不为visible的块级元素生效（auto/hidden/scroll都行） -
overflow: hidden会裁剪溢出内容——如果图片加了transform或负margin，可能被意外截掉 - 在 Flex 或 Grid 容器里设
overflow不会触发 BFC，这招就失效
替代方案：用 display: flow-root 更干净
display: flow-root是专为解决这个问题设计的，语义明确、无副作用，现代浏览器支持良好（Chrome 64+、Firefox 59+、Safari 15.4+）。
使用场景：需要兼容较新浏览器，又不想担心里外溢出风险。
- 比
overflow: hidden更安全——不裁剪、不隐藏滚动条、不影响clip-path等其他属性 - IE 完全不支持，如需兼容 IE11，仍得回退到
overflow: hidden或伪元素清除法 - 不能和
display: inline混用，必须是块级上下文
伪元素清除法（::after）还值得用吗
值得，尤其当项目要兼容老版本 Safari 或部分安卓 WebView 时——它们对flow-root支持不稳定，而伪元素法几乎零兼容性问题。
实操建议：写成可复用的 class，避免每次重复写。
- 必须同时设置
content: ""、display: table（或block）、clear: both - 别漏掉
height: 0或font-size: 0，否则可能撑开多余空白 - 用
display: table比block更稳妥，能避免某些旧版内核下 margin 折叠异常
图片本身溢出容器怎么办
浮动只是让图片“脱离文档流”，真正溢出往往是图片原始尺寸大于容器，或没设max-width。
常见错误：以为清除了浮动就万事大吉，结果图片还是撑破盒子。
- 给图片加
max-width: 100%和，这是响应式基础
- 如果容器用了
flex或<code>grid，浮动本身已不推荐，应改用align-self或justify-self控制位置 -
object-fit对<img>有效，但对背景图要用background-size，别混用
浮动清除的本质是让父容器“看见”浮动元素的高度。很多人卡在以为只要加了overflow就一劳永逸，却忽略了图片自身尺寸、容器布局模式、以及目标浏览器的实际支持边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
