浮动高度不一致导致的“堆叠”本质是父容器塌陷与后续内容落入破碎空间的视觉错位；解决关键是触发父容器bfc（如display: flow-root）以正确包含浮动，而非依赖clear或硬设高度。
浮动元素高度不一致时的“堆叠”，本质不是元素真在Z轴重叠，而是父容器塌陷 + 后续内容落入破碎空间造成的视觉错位。解决重点不在“分开它们”，而在让父容器正确感知高度、让后续内容有明确起点。
为什么clear: both加了还是堆叠？
因为clear只作用于**自身**，它让当前元素避开前面浮动元素的边缘，但无法修复父容器高度为0的问题。如果父容器已经塌陷，浮动元素实际已溢出到外层上下文，clear可能“找不到”该避开的对象。
- 检查 computed style：确认
clear是否被更高优先级规则覆盖（比如某个!important或更具体的选择器） -
clear对position: absolute、flex或grid子项无效——它只在块级常规流中起作用 - 别把
clear: both加在浮动元素自己身上，它前面没浮动兄弟，毫无意义
父容器高度塌陷必须先处理
这是所有堆叠问题的根源。浮动子元素脱离文档流，父容器计算高度时直接忽略它们，结果是高度=0，后续兄弟元素从顶部开始渲染。
- 最稳妥的现代写法：
display: flow-root—— 专为包含浮动设计，无裁剪副作用，兼容性到Chrome 64+/Firefox 58+ - 兼容性兜底方案：
overflow: hidden或overflow: auto，但注意会裁剪box-shadow或下拉菜单等溢出内容 - 伪元素
::after清除法仍可用，但需确保三要素齐全：content: ""+display: block+clear: both，且必须作用于**直接父容器**
高度不一致导致换行错乱怎么办？
当多列浮动元素高度差异大，第二行第一个元素可能卡在第一行某个高元素的右侧，而不是从左边界开始——这是浮动布局固有缺陷，靠clear或padding只能临时缓解，不能根治。
- 统一
height仅适用于内容高度可控场景（如图标+单行文字），否则易截断或留白 - 用
padding-bottom拉齐底部文字基线可行，但需手动测量差值，响应式下失效 - 真正可靠的解法是放弃
float：改用display: flex+flex-wrap: wrap，子项自动等高（align-items: stretch默认生效），宽度用flex: 1或flex: 0 0 200px控制，不再依赖width和float
浮动本意是图文绕排，不是栅格布局。现在还硬扛float做多栏，等于主动选择一堆需要反复修补的边界条件。哪怕只是给老项目加个新模块，也建议用display: flow-root包住旧浮动，再用flex写新区域——混用比硬撑更可持续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
