浮动元素设负 margin 会视觉重叠但不改变文档流占位，后续元素仍按原位置布局；其重叠是 paint box 偏移所致，非结构覆盖，且 z-index 需配合 position 才生效。
浮动元素设负 margin 会产生重叠，是因为它先按浮动规则“卡位”，再用负值强行视觉偏移——但文档流占位没变，后续元素仍按原始位置对齐，结果就是“画上去”了，却没“挪走”。
浮动 + 负 margin 的重叠不是层叠，是视觉错位
浮动本身会让元素脱离普通文档流，但仍在浮动上下文中参与布局计算。加 margin-left: -20px 不是让元素“挤进”前一个块里，而是：先完成浮动定位（比如贴左上角），再往左多画 20px。它的 layout box 还在原处，只是 paint box 偏了。所以重叠是渲染结果，不是结构覆盖。
- 前一个元素没浮动？负
margin拉不动它，也不会钻进去——它守着自己的文档流位置 -
margin-top: -10px对float: left元素有效，但对float: right在旧版 Safari 可能触发行高塌陷 - 多个连续浮动元素都设负
margin，浏览器逐个算边界，容易错位；负值不叠加，也不累积
清除浮动后负 margin 失效，大概率是参照系没了
父容器用了 ::after { content: ""; display: table; clear: both; } 后，子元素的负 margin 看似“没反应”，不是 bug，而是清除操作闭合了浮动上下文，负 margin 失去了可作用的相邻浮动参照物。
- 检查父容器是否隐式创建 BFC：
overflow: hidden、display: flow-root、position: absolute都会让负margin只在内部生效，无法外溢 - 若目标是让子元素突破父容器边界去重叠外部元素，就得确保父容器不触发 BFC——比如避免
overflow: hidden - 调试时用
outline: 1px dashed red查真实浮动边界，比border更准（border会改盒模型）
z-index 在浮动 + 负 margin 场景下基本无效
只写 z-index: 999 没用。浮动本身不触发层叠上下文，z-index 必须配合 position: relative（或 absolute/fixed）才生效。而且两个元素得属于同一层叠上下文，否则父容器的 z-index 非 auto 就会截断子级作用范围。
立即学习“前端免费学习笔记（深入）”；
- 移动端 Safari 对
z-index+ 浮动兼容性差，可备选transform: translateZ(0)强制新建层叠上下文 - 写了
position: relative却没设z-index？那还是按 HTML 顺序堆叠，负margin不改变这个默认顺序 - 别指望靠负
margin控制谁在上谁在下——它只管“在哪”，不管“谁盖谁”
真正影响重叠效果的关键，是浮动上下文是否连贯、BFC 是否意外截断、以及 position 和 z-index 是否成对出现。这些细节在响应式变化或内容增减时最容易暴露，比偏移数值本身更值得盯紧。
