浮动元素高度不一致导致父容器塌陷，因脱离文档流后父容器无法感知真实高度；可通过伪元素清除浮动配合padding-bottom与负margin实现视觉等高，或用flexbox替代，必要时再用js动态同步高度。
浮动元素高度不一致导致父容器塌陷
浮动元素脱离文档流后，父容器无法感知子元素真实高度，直接表现为高度为0——这是等高布局失效的根源。不是样式没写对，是CSS渲染机制本身就不支持自动同步浮动子项高度。
- 常见错误现象：
float: left的多个div高度不同，但外层container看不见底，下方内容往上顶 - 触发条件：父容器没清除浮动，也没设置固定高度或最小高度
- 别试
height: 100%或min-height硬撑——它只响应父级高度，不拉平兄弟元素 - 兼容性上，
overflow: hidden是最稳妥的清除方案，但要注意会裁剪溢出内容
用伪元素清除浮动并配合 padding-bottom 模拟等高
纯CSS实现“视觉等高”的核心思路是：不真让所有浮动块变一样高，而是让它们的底部视觉对齐。关键在父容器底部预留统一空间，再用负边距把内容拉回来。
- 给父容器加
::after伪元素，并设clear: both，这是现代清除浮动的标准写法 - 给每个浮动子项设相同值的
padding-bottom（比如200px），再用margin-bottom: -200px抵消，避免撑开父容器 - 父容器必须设
overflow: hidden或auto，否则负边距可能失效 - 示例片段：
.container::after { content: ""; display: table; clear: both; } .item { float: left; padding-bottom: 150px; margin-bottom: -150px; }
JavaScript 动态同步浮动元素高度（仅当 CSS 不适用时）
当内容动态加载、高度不可预估，或需要严格像素级对齐时，CSS技巧会失效，此时才轮到JS补位。但别一上来就写脚本——先确认是否真绕不开CSS方案。
- 监听
resize和 DOM 变化（如MutationObserver），避免只在页面加载时运行一次 - 获取所有浮动元素的
offsetHeight，取最大值，再统一赋给每个元素的minHeight - 注意：直接改
height会破坏响应式，优先用min-height；若内容超出，需配合overflow: auto - 不要用
getComputedStyle读取height，它返回的是内联样式或初始值，不反映实际渲染高度
Flexbox 替代方案为何不总能直接替换浮动
虽然 display: flex 天然支持等高，但强行替换浮动常引发布局断裂——尤其当原有结构依赖浮动特性（如文字环绕、窄屏堆叠）时。
立即学习“前端免费学习笔记（深入）”；
- 浮动元素可以和文本自然混排，
flex容器默认是块级，打断行内流 -
flex的align-items: stretch确实让子项等高，但若子项含position: absolute或float，它就失效 - 老项目升级时，检查是否有依赖
float的第三方组件（比如某些富文本编辑器的工具栏） - 如果只是为等高，且无其他浮动依赖，用
display: flex是最干净的解法；否则，别为了“现代”而改出新bug
