float导致父容器高度塌陷使标题悬浮，需用overflow:hidden或伪元素清除浮动；z-index对float无效，标题需position:relative才生效；响应式下推荐flex或grid替代float以确保稳定绕排。
float 导致父容器高度塌陷，标题就掉出图片外
用 float 让图片左/右浮动后，紧挨着的标题文字确实会“绕排”上去，但父级 <div> 高度往往变成 0——因为浮动元素脱离文档流，父容器根本“看不见”它。结果就是标题看似重叠，实则悬浮在空白区域上，一加边框或背景色立马露馅。
<p>解决方法不是硬调 <code>margin-top 把标题往上拉，而是让父容器重新“感知”浮动子元素：
- 给父容器加
overflow: hidden（兼容性好，IE6+） - 或用伪元素清除：在父容器末尾加
::after { content: ""; display: table; clear: both; } - 避免用
clear: both单独塞一个空<div>，冗余且语义差 <h3>z-index 在 float 元素上无效？其实是层叠上下文没建对</h3> <p>想让标题盖在图片上，光写 <code>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></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固定行号，否则图片高度变化时标题会悬空
浮动 + 定位能快速实现简单重叠，但一旦涉及响应、动画或语义结构，它暴露的边界比想象中窄。真正难的不是让标题盖上去，而是盖得稳、跟得上、不伤可访问性。
- 给标题加
