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+）。使用场景：需要兼容较新浏览器，又不想担心里外溢出风险。立即学习“前端免费学习笔记（深入）”； 知网AI智能写作 知网AI智能写作，写文档、写报告如此简单