浮动元素遇负margin时，重叠由文档流位置决定：先按浮动规则确定初始占位，再视觉偏移；清除浮动后负margin失效因失去参照物；z-index需配合position才生效；推荐用Flexbox/Grid替代。
浮动元素遇到负margin时，重叠行为由文档流位置决定
负 margin 不会把浮动元素“拉出”其原始浮动上下文的计算位置，而是先按正常浮动规则（比如 float: left 向左贴边、向上靠齐）确定初始占位，再用负值去偏移视觉呈现。这意味着：重叠是否生效、叠在哪一层，取决于浮动方向、负值方向是否一致，以及后续兄弟元素是否也浮动。
- 如果
float: left+margin-left: -20px，元素会向左视觉偏移，可能盖住前一个浮动元素；但若前一个元素没浮动，它仍占据文档流位置，负 margin 无法让它“钻进”非浮动块里 -
margin-top: -10px对左浮动元素有效，但对右浮动元素可能触发不同行高塌陷，尤其在 IE 或旧版 Safari 中表现不一致 - 多个连续浮动元素都设负
margin时，浏览器会逐个计算浮动后的边界，容易出现意外错位——不是所有负值都能“叠加”生效
清除浮动后负margin失效的典型场景
当父容器用了 clear: both 或伪元素 ::after { content: ""; display: table; clear: both; } 清除浮动，子元素的负 margin 常常“看起来没反应”。这不是 bug，而是因为清除操作强制闭合了浮动上下文，使负 margin 失去了可作用的相邻浮动参照物。
- 检查父容器是否隐式或显式触发了
hasLayout（IE）或 BFC（现代浏览器），这会让负 margin 只影响内部布局，不外溢 - 若目标是让子元素突破父容器边界重叠外部元素，得确保父容器本身不参与 BFC 创建——比如避免
overflow: hidden、display: flow-root - 临时调试可用
outline: 1px dashed red查看浮动元素真实边界，比border更可靠（border 会影响盒模型计算）
z-index 在浮动+负margin组合中基本无效
只要没给元素设置 position: relative/absolute/fixed，z-index 就不起作用——浮动本身不触发层叠上下文。很多人以为加了负 margin 就能控制谁在上谁在下，结果发现重叠顺序还是按 HTML 顺序来。
- 必须同时设置
position: relative和z-index才能干预堆叠顺序；仅float+margin不行 - 若两个元素都设置了
position: relative，注意它们是否属于同一层叠上下文：父容器若有z-index且非auto，会截断子元素的 z-index 作用范围 - 移动端 Safari 对
z-index+ 浮动的兼容性更脆弱，建议用transform: translateZ(0)强制创建新层叠上下文作为备选
替代方案比硬刚 float + negative margin 更可控
现在真没必要靠浮动和负 margin 拼复杂重叠。Flexbox 和 Grid 原生支持重叠与负位移，语义清晰、调试直观、响应式友好。
立即学习“前端免费学习笔记（深入）”；
- 用
flexbox实现左图右文重叠：父容器display: flex，图片margin-right: -40px即可，无需float - Grid 中直接写
grid-template-areas或用grid-column-start让区域跨列重叠，比手动算负 margin 安全得多 - 如果必须兼容 IE10+ 且不能用 Flexbox，
inline-block+vertical-align+ 负margin比浮动更可预测，但要注意空白符带来的间隙问题
浮动和负 margin 的组合像一把钝刀——能切开简单布局，但每次微调都要重新测边界、清浮动、查层叠上下文。真正难的不是写出来，而是改需求时还能快速定位哪一行 margin 影响了哪一块重叠。
