父元素高度塌陷是因为浮动子元素脱离文档流，导致父容器无法计算其高度；Bootstrap的clearfix类必须加在直接父容器上，用display:flow-root实现（IE不支持），与overflow:hidden或flex混用会失效或引发裁剪。
直接用 class="clearfix" 就能解决，但必须加在父容器上，且不能和 overflow: hidden 或 display: flex 混用——否则要么失效，要么引发裁剪或布局冲突。
为什么父元素高度会塌陷
浮动元素（如 float: left）会脱离文档流，父容器默认只计算非浮动子元素的高度。如果父容器没设 height 或 min-height，又没有其他普通流内容撑开它，高度就变成 0。这不是 Bootstrap 的 bug，是 CSS 浮动的原始行为。
- 常见现象：父容器背景色不显示、边框缩成一条线、后续元素往上“贴”到浮动块下方
- 别误判为 Bootstrap 问题——哪怕不用任何框架，纯 CSS 浮动也会塌陷
- Bootstrap 4 的
.clearfix类只是封装了标准清除方案，并非魔法修复
Bootstrap 4 中 .clearfix 的正确用法
Bootstrap 4 的 .clearfix 基于 display: flow-root，比旧版伪元素更轻量，但仅适用于现代浏览器（IE 不支持）。
- 必须加在浮动子元素的**直接父容器**上，例如：
<div class="clearfix"><div class="float-left"></div></div> - 不要加在浮动子元素自己身上（
<div class="float-left clearfix">）——无效 <li>如果项目需兼容 IE11，不能只靠 <code>.clearfix，得额外补一段 B3 风格 CSS：.clearfix::before,.clearfix::after {content:"";display: table;}.clearfix::after {clear: both;} - 检查是否被其他样式覆盖：比如父容器写了
overflow: hidden，会压制flow-root的效果 - 父容器用了
display: flex或display: grid—— 它们天然形成 BFC，加.clearfix没作用，还可能干扰 flex 项目排列 - 父容器已设
height或min-height—— 塌陷被掩盖，加了也看不出效果，反而增加冗余 - 子元素浮动但父容器宽度不足，导致换行错乱 ——
.clearfix不解决宽度问题，得调width或改用flex-wrap - 用
overflow: auto临时“撑高”后发现下拉菜单被裁剪 —— 这说明你真正需要的是.clearfix，而不是靠溢出隐藏硬扛 - 如果你的用户还有用 IE11 或老版 Safari，光引入 Bootstrap 4 CSS 是不够的
- 别指望 PostCSS 自动降级：
display: flow-root没有安全的 fallback，必须手动提供伪元素方案 - 验证方式很简单：打开 DevTools，选中父容器，看 computed style 里
display是否真的变成了flow-root；如果不是，说明浏览器不支持，得切回伪元素写法
什么时候不该用 .clearfix
.clearfix 是为浮动服务的，不是万能布局补丁。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的兼容性陷阱
Bootstrap 4 默认的 .clearfix 在 Safari 15.4 之前、Edge 79 之前、所有 IE 版本里都不生效——这些浏览器根本不认识 display: flow-root。
