父元素高度塌陷是因浮动子元素脱离文档流，clearfix通过触发BFC解决该问题；Bootstrap 3用伪元素+clear:both，Bootstrap 4+用display:flow-root（IE不支持），需按浏览器兼容性选择实现。
父元素高度塌陷是因为子元素浮动后脱离文档流
浮动元素不再参与父容器的高度计算，导致父元素“看不见”子元素，高度塌陷成 0。这不是
bootstrap
特有现象，而是 css 浮动的固有行为。
就是用来强制父元素包含浮动子元素的通用方案。
Bootstrap 3 和 4 都提供
类，但实现方式不同，直接混用容易失效：
Bootstrap 3 的
依赖
和
伪元素 +
+
Bootstrap 4+ 改用
（更现代、更轻量），但 IE 不支持
如果你项目还在用 IE11，必须回退到 B3 的 clearfix 写法，不能只靠
如何正确给父容器加 clearfix
不是所有浮动容器都需要手动加
—— 只有当父容器没设高度、且你依赖它撑开布局（比如背景色、边框、margin 下方内容）时才需要。
实操建议：
优先用 Bootstrap 4+ 的
（对应
），适用于 Chrome/Firefox/Safari/Edge 79+
兼容 IE？必须自己补一段 B3 风格的 CSS：
别在 flex 或 grid 容器上画蛇添足加
—— 它们天然不塌陷，加了也没用
如果子元素用了
但父容器宽度不够，
救不了布局错乱，得调 width 或改用 flex
为什么有时候加了 clearfix 还没效果
常见错误不是写法不对，而是加错了位置或被其他样式覆盖：
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
把
加在浮动子元素上（如
clearfix.clearfix.clearfix:before:aftercontent: ""clear: bothdisplay: flow-rootflow-root.clearfixclass="clearfix"display: flow-root.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after { clear: both; }.clearfixfloat: right.clearfix.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 —— 那才是问题的起点。