父元素高度塌陷是因浮动子元素脱离文档流，clearfix通过触发BFC解决该问题；Bootstrap 3用伪元素+clear:both，Bootstrap 4+用display:flow-root（IE不支持），需按浏览器兼容性选择实现。
父元素高度塌陷是因为子元素浮动后脱离文档流
浮动元素不再参与父容器的高度计算，导致父元素“看不见”子元素，高度塌陷成 0。这不是 bootstrap 特有现象，而是 css 浮动的固有行为。clearfix 就是用来强制父元素包含浮动子元素的通用方案。
Bootstrap 3 和 4 都提供 .clearfix 类，但实现方式不同，直接混用容易失效：
- Bootstrap 3 的
.clearfix依赖:before和:after伪元素 +content: ""+clear: both - Bootstrap 4+ 改用
display: flow-root（更现代、更轻量），但 IE 不支持 - 如果你项目还在用 IE11，必须回退到 B3 的 clearfix 写法，不能只靠
flow-root
如何正确给父容器加 clearfix
不是所有浮动容器都需要手动加 .clearfix —— 只有当父容器没设高度、且你依赖它撑开布局（比如背景色、边框、margin 下方内容）时才需要。
实操建议：
- 优先用 Bootstrap 4+ 的
class="clearfix"（对应display: flow-root），适用于 Chrome/Firefox/Safari/Edge 79+ - 兼容 IE？必须自己补一段 B3 风格的 CSS：
.clearfix::before,<br>.clearfix::after {<br> content: ""; <br> display: table;<br>}<br>.clearfix::after { clear: both; } - 别在 flex 或 grid 容器上画蛇添足加
.clearfix—— 它们天然不塌陷，加了也没用 - 如果子元素用了
float: right但父容器宽度不够，.clearfix救不了布局错乱，得调 width 或改用 flex
为什么有时候加了 clearfix 还没效果
常见错误不是写法不对，而是加错了位置或被其他样式覆盖：
- 把
.clearfix加在浮动子元素上（如<div class="float-left clearfix">）—— 没用，必须加在父容器上 - 父容器本身设置了
height或min-height，掩盖了塌陷，误以为不需要 clearfix - CSS 优先级问题：自定义样式里写了
.parent { overflow: hidden; }，这也能“假装”撑高，但会裁剪position: absolute子元素，比 clearfix 更危险 - 用了 Sass/PostCSS 自动插入 clearfix（比如某些 grid 工具类），结果和手写的重复冲突，反而触发双伪元素 bug
替代 clearfix 的现代方案要不要用
可以，但要看场景：
-
overflow: auto或hidden确实能触发 BFC 解决塌陷，但会隐藏溢出内容、影响滚动条行为，不是“干净”的解法 -
display: flow-root是最接近 clearfix 语义的原生方案，推荐在非 IE 项目中作为默认选择 - Flexbox（
display: flex）或 Grid（display: grid）布局下，浮动本身就不该出现 —— 如果你还得靠 float 排版，说明布局模型选错了 - 别为了“不用 clearfix”硬套新特性，尤其在维护老项目时，一行
class="clearfix"比重构整块 DOM 更安全
真正容易被忽略的是：clearfix 不是万能胶，它只解决“高度计算”，不解决“布局意图”。浮动本身已是过时模式，优先考虑为什么这里非要用 float —— 那才是问题的起点。
