负外边距不能真正实现双栏等高，而是通过视觉欺骗绕过高度塌陷：利用margin负值将兄弟元素拉至对齐底部，需配合float或定位及BFC触发，无自动适应能力，仅适用于特定旧环境。
负外边距为什么能让双栏等高
它不真让两栏“等高”，而是用视觉欺骗绕过高度塌陷——父容器不设高度时，子元素浮动或脱离文档流会导致父容器无法包裹内容；margin-bottom 为负值，把后续兄弟元素“拉上来”，让它们看起来对齐了底部。
本质是利用 CSS 盒模型中 margin 的重叠行为和渲染顺序，不是 Flex 或 Grid 那种逻辑等高。所以它只在特定结构下有效，且依赖 DOM 顺序和定位方式。
- 必须配合
float或position: relative/absolute使用，纯静态流无效 - 负值大小通常等于另一栏预估最大高度，没有自动适应能力
- 父容器需触发 BFC（比如加
overflow: hidden），否则塌陷依旧
典型写法：两栏浮动 + 负外边距 + 父容器 BFC
最常见组合：左栏 float: left，右栏 float: right，右栏设 margin-left: -100% 或类似值，父容器加 overflow: hidden。
示例结构：
立即学习“前端免费学习笔记（深入）”；
.container { overflow: hidden; }
.left { float: left; width: 200px; }
.right { float: right; width: calc(100% - 200px); margin-left: -100%; }这里 margin-left: -100% 把右栏从右侧“拽回”到左栏右边，形成并排；而 overflow: hidden 强制父容器包含浮动子元素，避免塌陷。
- 如果右栏内容比左栏短，底部会露白——负 margin 不补内容，只调位置
-
width和margin必须严格匹配，差 1px 就可能错位 - IE6/7 对
margin-left: -100%解析不稳定，常需 hack
和 modern layout（Flex/Grid）的根本区别
Flex 和 Grid 是基于布局上下文的真等高：子项 align-items: stretch 会主动拉伸到容器最高项的高度；而负 margin 是“我不管你怎么高，我就把你往下压一点，再把另一个往上拉一点”。
- Flex/Grid 支持响应式重排、语义清晰、可访问性好；负 margin 方案一旦写死宽度和负值，换屏就崩
- Flex 中
min-height、height: 0; min-height: 100%等组合能真正撑开等高容器；负 margin 做不到 - 现代调试工具里看不到“等高逻辑”，只看到两个元素各自高度不同但底部碰到了——容易误判为 bug
现在还该用吗？什么场景下不得不碰它
绝大多数新项目不该用。除非你维护一个 IE8 兼容的后台系统，且不能引入 JS 布局补丁，又没法改整体架构。
更现实的“不得不”场景：
– 第三方 CMS 输出固定 HTML 结构，你只能加 CSS，且禁用 JS
– 需要兼容旧版微信内置浏览器（X5 内核早期版本对 Flex 支持极差）
– 已上线多年的老系统，改布局会牵扯大量模板和测试回归
- 只要有一点可能升级到 Flex，优先用
display: flex; align-items: stretch - 如果必须用负 margin，务必在父容器加
min-height防止内容溢出不可见 - 别信“负 margin 很酷”，它会让接手的人花 20 分钟搞懂你在哪藏了个
-9999px
真正难的从来不是怎么写负 margin，而是怎么向同事解释为什么这一行代码改了，整个侧边栏就消失了。
