负 margin 会让 width: auto 的子元素变宽，因浏览器按 margin-left + width + margin-right = 父容器 content width 公式计算，负 margin 使 width 自动增大以维持等式成立；设固定 width 则仅视觉溢出。
负 margin 为什么会让 width: auto 的子元素变宽
因为浏览器在计算 width: auto 块级元素的宽度时，会把左右 margin 值纳入“总占位约束”公式： margin-left + width + margin-right = 父容器 content width。当 margin-left 或 margin-right 为负值，width 就会被自动拉大来维持等式成立。
这和你设了 width: 300px 完全不同——后者固定内容区，负 margin 只推位置，不改尺寸。
- 父容器
width: 400px，子元素没设width，只写margin: 0 -50px→ 子元素实际渲染宽度 ≈500px - 若同时设
width: 300px和margin: 0 -50px→ 宽度仍是300px，只是视觉上右伸出去50px - 这个行为只对
display: block（且非 flex/grid 子项）+width: auto有效；inline、flex-item、grid-item不适用
overflow: hidden 为啥有时裁不掉负 margin 溢出部分
关键点在于：overflow: hidden 默认只裁剪 content、padding、border 区域，不裁剪 margin 盒子本身——而负 margin 推出来的部分，本质上是 margin box 的视觉延伸。
要让它真正被裁掉，得让父容器触发 BFC（Block Formatting Context），常见方式包括：
立即学习“前端免费学习笔记（深入）”；
- 加
overflow: hidden同时确保父容器没设position: absolute或transform（否则可能创建新层叠上下文，绕过裁剪） - 用
display: flow-root（最干净，无副作用） - 加
float: left或position: absolute（但会破坏正常布局流，慎用）
特别注意 Safari 移动端：即使有 overflow: hidden，若父容器没触发 BFC，仍可能出现横向滚动条。
calc() + 负 margin 组合才是可控全宽方案
单纯靠 margin-left: -20px 很难精准撑满——它只移动位置，不声明目标宽度。真正想让子元素“视觉全宽”，必须配合 calc() 显式算出应有宽度。
比如父容器 padding: 0 20px，你想子元素覆盖到视口边缘：
.full-bleed {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
}
这里三个动作缺一不可：
-
calc(100% + 40px)中的100%是相对于父容器 content width，不含 padding，所以加的是左右 padding 总和 - 左右负 margin 必须对称，否则元素会整体偏移
- 父容器记得加
overflow: hidden或display: flow-root，否则溢出内容会撑开 body 导致横向滚动
Flex/Grid 容器里负 margin 基本失效
在 display: flex 或 display: grid 的父容器中，子元素的负 margin 不会触发“破框”效果——它只会被当作空间调整信号，用于微调项目间距，不会让项目物理溢出容器边界。
想在 Flex/Grid 里实现类似全宽效果，得换思路：
- 把需要全宽的元素提到 flex/grid 容器外，再用定位或负 margin 处理
- 用
position: absolute脱离文档流（但需手动控制尺寸和定位） - 改用
container-type: inline-size+@container查询做响应式伸缩（现代方案，兼容性有限）
别在 flex item 上白费劲试 margin-left: -100px —— 浏览器根本不会让它逃出去。
