浮动列高度不一致导致父容器无法包裹子列，清除浮动元素卡在最短列下方；padding-bottom与负margin-bottom配合overflow:hidden可欺骗父容器撑高，但flex/grid更现代可靠。
为什么浮动列高度不一致会导致布局错乱
浮动元素脱离文档流，父容器无法自动包裹子列，当各列内容高度不同时，后续的清除浮动元素（如 clear: both）会卡在最短列下方，造成视觉断层或背景塌陷。这不是“高度没设好”，而是父容器根本不知道子列实际多高。
padding-bottom + margin-bottom 负值补偿的核心逻辑
本质是用“视觉拉伸”骗过父容器：给每列加一个巨大的 padding-bottom（比如 9999px），再用等量的负 margin-bottom（-9999px）把多余空间抵消掉——这样列内容区域仍正常排列，但父容器因 padding 被撑开，能正确计算高度。
关键点：
- 必须给所有浮动列统一设置相同的
padding-bottom和margin-bottom值 -
padding-bottom不能为 0，否则父容器仍塌陷；值越大越保险，但不宜过大影响调试 - 父容器需设置
overflow: hidden或触发 BFC，否则负 margin 可能溢出 - 该技巧仅适用于纯浮动布局，Flex/Grid 下无需此操作
实际代码怎么写才不出错
假设三列浮动布局：
.col {
float: left;
width: 33.333%;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.container {
overflow: hidden; /* 必须！否则负 margin 外泄 */
}
常见翻车点：
- 忘了给
.container加overflow: hidden，导致右侧列被挤到下一行 - 列宽总和超过 100%（比如用了
box-sizing: content-box+ 边框/内边距），叠加 padding-bottom 后更易换行 - 在响应式中未重置该技巧（如小屏改用单列），负 margin 会引发意外滚动条
比这个更现代、更少坑的替代方案
如果项目支持 IE10+，直接用 display: flex 并设置 align-items: stretch（默认行为），所有子项自动等高，无需任何 hack。
若需兼容老浏览器且不愿用 JS，可考虑 display: table-cell（父容器 display: table，子列 display: table-cell），它天然等高，但语义偏离、响应式受限。
真正容易被忽略的是：这个 padding/margin 补偿法只解决“父容器高度”，不解决“列内内容垂直居中”——那得另加 position: relative + transform: translateY 或其他手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
