浮动元素不等高是因脱离文档流导致父容器无法感知其高度；用padding-bottom与margin-bottom成对补偿并触发bfc可视觉拉齐，但属兼容性 hack，现代开发应优先使用flex布局。
为什么左浮动和右浮动元素永远不等高
浮动元素脱离文档流，父容器根本“看不到”它们各自的实际高度。左浮动的 .left 和右浮动的 .right 各自按内容撑开，没有共享高度基准——这不是写错了，是 float 的行为本质。你看到的“右栏悬在半空”，恰恰说明它工作正常。
padding-bottom + margin-bottom 补偿怎么写才不翻车
这套组合不是加个数值就行，关键在成对、反向、同步、裁剪：
- 所有浮动子元素（包括
.left和.right）必须同时设置：padding-bottom: 9999px和margin-bottom: -9999px - 父容器必须设
overflow: hidden（触发 BFC，同时裁掉溢出的 padding 区域） - 不能只给其中一列加，漏一个，父容器就再次塌陷
- 数值别用
em或rem，缩放时易失效；IE8 及更早建议降到2000px并补min-height - 若父容器已有
border或background，这个技巧能拉齐背景色，但border-bottom会被overflow: hidden切掉
.container { overflow: hidden; }
.left, .right { float: left; width: 50%; padding-bottom: 9999px; margin-bottom: -9999px; }
.right { float: right; }
左 float + 右 float 混用时最常踩的坑
左右混用浮动本身就会放大布局脆弱性：
-
float: left和float: right在同一父容器里，若宽度总和超 100%（比如加了border或padding且box-sizing: content-box），右边那个直接掉到下一行 - 媒体查询切单列时，只写
float: none不够，必须同步重置padding-bottom和margin-bottom，否则高度异常塌陷或出现滚动条 - IE6–7 需要额外触发 hasLayout：
zoom: 1加在父容器上，否则负 margin 渲染错位甚至文字重叠 - 这个技巧只骗过眼睛，不改变真实 DOM 高度：JS 调用
offsetHeight仍返回原始内容高度，不是“视觉高度”
什么时候该果断放弃这个技巧
真正难的不是写出 padding-bottom: 9999px，而是意识到它只是障眼法：
- 如果你需要列内元素垂直居中（比如文字底部对齐），它完全不管用，得另加
position: relative+transform: translateY() - 如果列有
box-shadow或border-bottom，它们会消失在overflow: hidden里 - 如果项目支持 IE10+，直接用
display: flex+align-items: stretch，一行代码解决，响应式也自然适配 - 如果必须兼容 IE8，
display: table-cell更稳，虽然语义偏离、不能flex-wrap
这个补偿法现在只剩一个明确场景：维护一个还跑在 IE7 上的老系统，且不能动 JS、不能升级构建工具。其他情况，真没必要硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
