float导致父容器高度塌陷使标题悬浮，需用overflow:hidden或伪元素清除浮动；z-index对float无效，标题需position:relative才生效；响应式下推荐flex或grid替代float以确保稳定绕排。
float 导致父容器高度塌陷，标题就掉出图片外
用 float 让图片左/右浮动后，紧挨着的标题文字确实会“绕排”上去，但父级 <div> 高度往往变成 0——因为浮动元素脱离文档流，父容器根本“看不见”它。结果就是标题看似重叠，实则悬浮在空白区域上，一加边框或背景色立马露馅。
解决方法不是硬调 margin-top 把标题往上拉，而是让父容器重新“感知”浮动子元素：
- 给父容器加
overflow: hidden（兼容性好，IE6+） - 或用伪元素清除：在父容器末尾加
::after { content: ""; display: table; clear: both; } - 避免用
clear: both单独塞一个空<div>，冗余且语义差
z-index 在 float 元素上无效？其实是层叠上下文没建对
想让标题盖在图片上，光写 z-index: 1 没用——float 本身不创建层叠上下文，z-index 只对定位元素（position 不是 static）生效。标题若只是普通块元素，就算设了 z-index 也等于没写。
正确做法分两步走：
立即学习“前端免费学习笔记（深入）”；
- 给标题加
position: relative（不改变布局，只激活z-index） - 再设
z-index: 2；图片保持float，不用加position或z-index - 如果图片也用了
position: absolute，反而容易破坏绕排效果，慎用
移动端图片缩放后，浮动标题位置错乱
响应式场景下，图片用 max-width: 100% 缩放时，float 的尺寸基准仍是原始宽高，导致标题绕排区域错位——尤其 iOS Safari 常见，标题卡在旧位置不动。
关键不是禁用 float，而是让浮动行为随图片实时响应：
- 把图片和标题包进同一个
<figure>容器，样式作用于该容器而非单独元素 - 改用
display: flex替代float（现代项目首选），但注意老版本 Android UC 浏览器不支持flex-wrap绕排 - 若必须用
float，给图片加height: auto，并确保父容器宽度变化时触发重绘（例如加transform: translateZ(0)强制硬件加速）
用 CSS Grid 实现更可控的“重叠”，但别滥用 grid-area
真要精确控制标题压在图片某一块区域（比如右下角水印式），float 就力不从心了。Grid 是更直接的解法，但很多人一上来就写 grid-area，结果发现标题完全脱离文本流，不再“绕排”，而是强行覆盖——这和原始需求矛盾。
稳妥做法是保留语义流，只局部增强控制：
- 父容器设
display: grid，用grid-template-areas划分区域，但图片和标题仍保持正常文档顺序 - 标题用
grid-column: 1 / -1横跨全宽，再配合align-self: end压到底部 - 避免给标题设
grid-row固定行号，否则图片高度变化时标题会悬空
浮动 + 定位能快速实现简单重叠，但一旦涉及响应、动画或语义结构，它暴露的边界比想象中窄。真正难的不是让标题盖上去，而是盖得稳、跟得上、不伤可访问性。
