浮动导致父容器高度塌陷是因元素脱离文档流，表现为高度为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 并不能真正“清除”浮动影响
更糟的是，在 IE6 中， 立即学习“前端免费学习笔记（深入）”； 现代项目首选 更稳妥的通用方案是伪元素清除法，适配所有支持 其中 即使主容器用了 这不是兼容性问题，而是规范层冲突。CSS 2.1 明确规定：浮动元素不参与 Flex/Grid 布局计算。 真正难处理的，是那些混合了 inline-block、float、table-cell 和 modern layout 的遗留代码——它们之间的尺寸计算、基线对齐、margin 折叠规则完全不同，必须逐层剥离验证。clear: both 只是让当前元素避开前面浮动元素的边界，它本身不恢复父容器的 BFC（块级格式化上下文），因此无法解决父容器塌陷问题。把它加在最后一个浮动子元素后面，只能把那个空 clear 元素若同时设置了 zoom: 1（触发 hasLayout），反而可能引发额外的重绘异常。
作为清除手段（语义差、冗余 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 居中失效。
float 声明flex-wrap 替代多行浮动布局，用 justify-content 替代 text-align + float 模拟居中flex 前缀混乱），优先用 Autoprefixer，而非回退到 float
