负外边距需配合大正padding-bottom、overflow:hidden和float才能实现多列等高，原理是视觉欺骗：用等量正负值撑开并裁剪，使父容器高度由最高列决定。
负外边距本身不能单独实现多列等高，必须配合正 padding-bottom 和父容器 overflow: hidden 才能生效。直接设 margin-bottom: -9999px 不会拉平高度，反而可能破坏流式布局。
为什么必须配大正 padding-bottom？
核心原理是“视觉欺骗”：让每个子列靠 padding-bottom 向下撑开巨大空间，再用等量负 margin-bottom 把这个撑开的部分“拽回来”，使父容器计算高度时仍只看内容区域——但因为所有列都撑了同样大的底边距，父容器实际被撑到最高列的高度；最后靠 overflow: hidden 把多余 padding 裁掉，背景看起来就等高了。
-
padding-bottom值要足够大（如9999px），确保高于任何可能的内容高度 -
margin-bottom必须为对应负值（如-9999px），否则父容器会被撑得过高或过低 - 父容器必须设
overflow: hidden，否则多出的 padding 会溢出并撑开页面
float + 负 margin 的典型写法
这是最常见也最容易出错的组合。关键点不是“负 margin 让列变高”，而是它抵消了 padding 对布局的影响。
- 子列需
float: left，否则overflow: hidden在父容器上无效（非浮动元素不会触发 BFC） - 不能省略
width，否则浮动元素宽度由内容决定，列宽不可控 - 列之间用
margin-right间隔，但最后一列右侧会多出空白，可用父容器margin-right: -Xpx拉回（如margin-right: -20px）
示例：
.container { overflow: hidden; }
.item { float: left; width: 300px; margin: 0 20px -9999px 0; padding-bottom: 9999px; background: #4577dc; }
容易踩的坑
这套方案看着简单，但几个细节一错就全崩：
- 漏写
overflow: hidden→ 页面底部出现巨大空白，背景色溢出 -
padding-bottom和margin-bottom数值不一致 → 高度对不齐，某列明显矮一截 - 子列没设
float或用了display: inline-block→overflow: hidden失效，等高完全不工作 - 在 flex 或 grid 容器里混用这套 → 负 margin 会被忽略或行为异常，现代布局下应直接用
align-items: stretch
真正要小心的是：这套方案本质是 hack，依赖浮动和溢出裁剪，语义弱、可维护性差。如果目标浏览器支持 IE10+，优先用 display: flex；需要兼容 IE9 及以下，才考虑负 margin 方案——但务必严格按 padding/margin/overflow/float 四要素闭环验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
