浮动元素加负margin仅视觉偏移，不改变浮动计算逻辑；需配合position和z-index才能控制层叠顺序，现代布局应优先使用transform、Flex或Grid替代。
浮动元素加负 margin 看似“叠上去了”，其实只是视觉偏移碰巧撞上了邻近元素的占位空间——它不改变浮动计算逻辑，也不创建层叠上下文，重叠是偏移与原始布局交集的副作用。
浮动元素的负margin只在浮动后位置上做视觉修正
浏览器先按 float: left 或 float: right 规则把元素“贴边”并计算其浮动边界，再应用负 margin 做绘制层偏移。这个偏移不会回退重算浮动流，也不会让元素“钻进”非浮动块里。
-
float: left; margin-left: -20px：元素向左视觉挪动，可能盖住前一个已浮动的兄弟，但若前一个是普通块级元素，它仍占据文档流位置，负 margin 无法穿透 -
float: right; margin-top: -10px：在旧版 Safari 或 IE 中可能触发行高塌陷，导致下方内容上提错位，而非预期的“叠上去” - 多个连续浮动子项都设负
margin：浏览器逐个计算浮动后的边界，负值不叠加，容易出现错位或间隙残留
清除浮动会让负margin“失效”不是bug，是参照物没了
用 clear: both 或伪元素 ::after { content: ""; display: table; clear: both; } 清除浮动后，父容器闭合了浮动上下文，子元素失去浮动参照系，负 margin 就不再有可作用的相邻浮动边界。
- 检查父容器是否隐式/显式触发了 BFC（如
overflow: hidden、display: flow-root），这会让负margin只影响内部，不外溢 - 若目标是让子元素突破父容器边界去重叠外部元素，得确保父容器没设
overflow: hidden或display: flow-root—— 否则溢出部分被裁切或隔离 - 调试时可用
outline: 1px dashed red查看浮动元素真实边界，比border更可靠（border会改变盒模型）
z-index 在 float + 负margin 组合里基本无效
浮动本身不触发层叠上下文，仅靠 margin-left: -20px 加 z-index: 2 不起作用——浏览器忽略未设 position 的 z-index 值，重叠顺序仍由 HTML 源顺序决定。
- 必须同时设置
position: relative（哪怕只是占位）和z-index才能干预堆叠顺序 - 若两个元素都设了
position: relative，注意它们是否属于同一层叠上下文：父容器若有z-index且非auto，会截断子元素的z-index作用范围 - 移动端 Safari 对
z-index+ 浮动兼容性更差，临时方案可用transform: translateZ(0)强制创建新层叠上下文
更稳的替代方案：用 transform 或 Flex/Grid 替代 float + 负margin
如果目标只是“视觉上叠上去”，transform: translate() 比负 margin 更可靠；如果需要结构化重叠布局，直接用 display: flex 或 display: grid 更可控。
-
transform: translateX(-20px)：纯渲染层偏移，不触发重排，不影响getBoundingClientRect()，也不推挤兄弟元素 -
display: flex容器中，用order控制视觉顺序，用align-self微调单个项目位置，避免负margin被justify-content覆盖 - 浮动+负margin 是遗留写法，现代布局中应优先考虑
display: flow-root隔离、transform偏移、或 Flex/Grid 原生支持
真正容易被忽略的是：负 margin 的行为高度依赖上下文——父容器是否 BFC、兄弟是否浮动、是否发生外边距合并、甚至浏览器版本，都会让同一个值产生完全不同的结果。别把它当通用位移工具，先确认你到底要解决的是“视觉重叠”还是“布局占位调整”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
