图片加 float 后“跑出”容器是因为脱离文档流致父容器高度塌陷；需用 clearfix（content/ display: table/ clear: both）或现代布局替代，overflow: hidden 有裁剪风险且新版浏览器中可能失效。
为什么图片加了 float 后就“跑出”容器了
不是图片自己乱跑，是它被设为 float: left 或 float: right 后脱离了文档流——父容器压根“看不见”它的高度，自然不会撑开。开发者工具里看父容器高度是 0 或极小值，背景、边框、margin-bottom 全失效，就是典型症状。
用 .clearfix::after 修复时必须写对这几点
伪元素清除浮动不是写个 ::after 就完事，漏掉任一关键点都会失效：
-
content: ""必须有，且不能是none或空格，否则伪元素不渲染 -
display: table比display: block更稳妥：它能触发 BFC，同时避免旧版 Safari 下的 margin 异常 -
clear: both必须写在::after上，只写clear不生效，写在父元素上也不行 - IE8 需要单冒号写法：
:after，双冒号::after在 IE8 中不识别（现代项目可用 Autoprefixer 自动降级）
overflow: hidden 看似快，但图片带阴影或定位偏移时会出问题
给父容器加 overflow: hidden 确实能“看起来修好”，因为它强制创建 BFC，让容器重新包含浮动子元素。但它本质是裁剪器：
- 如果图片用了
position: absolute微调位置、或加了box-shadow、或靠transform: translateX(-10px)拉出边缘，全会被硬切掉 - 移动端下配合
touch-action: pan-y时，可能意外禁用垂直滚动 - 在 Chrome 105+ 或 Firefox 110+ 中，若父容器已是
display: flex或grid，overflow: hidden不再触发 BFC，此时“修复”直接失效
现代项目里，float 图片本身就不该存在
用 float 排图是 2000 年代的做法，现在有更干净的替代方案：
- 单张图片居中/对齐：直接用
text-align: center（父容器是块级）或margin: 0 auto（图片设display: block） - 多图网格：用
display: grid+grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) - 图文环绕需求（比如文章配图）：用
shape-outside+float是唯一合法场景，但此时父容器本就不该依赖高度包裹，也无需clearfix - 第三方库如 Bootstrap 的
.row已内置clearfix，重复添加会导致清除逻辑冲突，高度计算反而异常
真正容易被忽略的是：很多所谓“浮动溢出”，其实是因为图片加载延迟导致 DOM 渲染顺序错乱，clearfix 类加得再标准，若父容器在图片插入前就完成渲染，依然白搭——这种场景该用 img 的 load 事件监听后手动触发重排，而不是死磕 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
