浮动导致父容器高度塌陷是因元素脱离文档流，表现为高度为0、背景不显示；clear: both无法解决塌陷，推荐伪元素清除法（.clearfix::after）或overflow触发bfc。
浮动元素导致父容器高度塌陷的典型表现
当子元素使用 float: left 或 float: right 后，父容器常常“看不见”子元素的高度，表现为高度为 0，背景色/边框不显示，后续兄弟元素上移——这不是 bug，而是浮动元素脱离文档流的自然结果。
常见于导航栏、图文混排、多栏卡片布局等场景。IE6–IE7 下还可能触发双倍 margin bug（margin-left 或 margin-right 被渲染为两倍）。
- 检查父容器是否设置了
height或min-height（临时掩盖但未解决问题） - 用浏览器开发者工具查看 computed height，确认是否为
0px - 注意：Flexbox 或 Grid 布局中不应再用
float做主布局，否则会破坏轴对齐逻辑
clear: both 并不能真正“清除”浮动影响
clear: both 只是让当前元素避开前面浮动元素的边界，它本身不恢复父容器的 BFC（块级格式化上下文），因此无法解决父容器塌陷问题。把它加在最后一个浮动子元素后面，只能把那个空 <div> 拉下来，父容器依然无高度。<p>更糟的是，在 IE6 中，<code>clear 元素若同时设置了 zoom: 1（触发 hasLayout），反而可能引发额外的重绘异常。
立即学习“前端免费学习笔记（深入）”；
- 不要用
<div style="clear:both"></div>作为清除手段（语义差、冗余 DOM） - 避免在浮动元素自身上写
clear，除非你明确需要跳过前一个浮动块 - 若必须用伪元素清除，请确保
::after的content不为空字符串（IE7+ 要求至少为" "）
推荐的清除方案及兼容性取舍
现代项目首选 overflow: hidden 或 overflow: auto 触发 BFC，简单有效，兼容到 IE6。但要注意：若父容器内有绝对定位元素且溢出需显示（如下拉菜单），overflow: hidden 会将其裁剪。
更稳妥的通用方案是伪元素清除法，适配所有支持 ::after 的浏览器（IE8+）：
.clearfix::after {
content: " ";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6–IE7 hack */
}其中 *zoom: 1 是 IE6–IE7 专用 hack，用于触发 hasLayout；display: table 比 block 更稳妥，避免某些旧版浏览器中 display: block + clear 失效的问题。
Flex/Grid 布局中仍遇到浮动残留？检查继承与重置
即使主容器用了 display: flex，如果子元素显式声明了 float: left，该声明依然生效，并可能导致意外交互——比如 float 会覆盖 align-self 行为，或使 margin: auto 居中失效。
这不是兼容性问题，而是规范层冲突。CSS 2.1 明确规定：浮动元素不参与 Flex/Grid 布局计算。
- 在 Flex 容器内，删掉所有子元素的
float声明 - 用
flex-wrap替代多行浮动布局，用justify-content替代text-align+float模拟居中 - 若需兼容老版本 Safari（
flex前缀混乱），优先用 Autoprefixer，而非回退到float
真正难处理的，是那些混合了 inline-block、float、table-cell 和 modern layout 的遗留代码——它们之间的尺寸计算、基线对齐、margin 折叠规则完全不同，必须逐层剥离验证。
