图像跑出页脚本质是父容器高度塌陷或定位失控，主因包括父容器未撑高、浮动未清除、绝对定位脱离文档流、Flex/Grid中图片未设max-width:100%等。
图像跑出页脚，本质是父容器高度塌陷或定位失控，不是图片本身的问题。
为什么 ![HTML5图像位置怎么确定图像跑版到页脚外咋办_跑版修复调整说明【说明】]()
常见原因不是图片太大，而是它所在的父级（比如 如果图像是浮动布局（比如图文混排），父容器必须包含浮动元素的高度，否则后续块（如页脚）会无视它。 一旦用了 Flex 容器默认 容易被忽略的是：图片加载完成前，、position: absolute / float 后脱离文档流。浏览器渲染时，页脚按“前面内容结束位置”来定，而浮动/绝对定位的图片不参与这个计算，就直接叠在页脚下方了。
min-height 或内容为空时高度为 0float: left 但没清浮动（clear: both）position: absolute 且 top/bottom 值超出了父容器范围align-items 或 justify-content，导致图片被挤出可视区用
overflow: hidden 或 display: flow-root 清除浮动
overflow: hidden（兼容性好，但可能截断 box-shadow 或 dropdown）
display: flow-root（推荐，专为清除浮动设计，无副作用）clearfix 伪类——代码冗余，且容易漏加
检查
position 和 z-index 是否让图片脱离布局流position: absolute 或 fixed，图片就不再影响父容器高度，也不会推着页脚下移。
absolute 的父级是否设置了 position: relative —— 否则它会相对于 定位，极易跑版
bottom: -20px 这类负值，除非你明确需要它溢出z-index 不影响位置计算，只控制层叠顺序；别误以为调高它就能“拉回”页面流Flex/Grid 布局中图像溢出页脚的修复点
align-items: stretch，但如果子项（如图片）没设 max-width: 100%，又遇到响应式断点，就可能撑破容器、压到页脚上。
max-width: 100% 和 align-items: flex-start 防止图片被拉伸变形后错位grid-template-rows: 1fr auto —— 若内容不足 1fr，页脚会上浮；改用 minmax(0, 1fr) 更稳height 占位或用 aspect-ratio（支持度 OK）能缓解。
