直接给父容器加 .clearfix 类可解决高度塌陷，但必须加在直接包裹浮动子项的父元素上，且 content: ""、display: table、clear: both 三行缺一不可：content: "" 生成伪元素，display: table 创建 bfc 避免干扰，clear: both 强制撑开底部。

直接给父容器加 .clearfix 类就能解决高度塌陷，但前提是它加在「直接包裹浮动子项」的父元素上，且三行关键样式一个都不能少——content: ""、display: table、clear: both。漏掉 content: "" 是失效最常见原因，不是“看起来没效果”，而是伪元素压根没生成。

为什么 .clearfix::after 必须写这三行？

缺一不可，不是可选配置：

• content: ""——没有这句，伪元素不渲染，后面所有声明都白搭；写成 content: ;（无引号）或空格字符串会被浏览器忽略
• display: table——比 block 更稳：天然创建匿名 BFC，不继承 line-height，避免因行内格式化上下文导致撑高失败；inline-block 绝对不用，受空白符干扰且不建 BFC
• clear: both——真正起作用的部分，强制该伪元素落到所有浮动元素下方，从而撑开父容器底部；但它只对块级框生效，若父容器是 display: inline 或 inline-flex，这行就无效

.clearfix 该加在哪一层？加错位置等于没加

必须加在「直接包裹浮动子项」的父元素上，多一层或少一层都不行：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• HTML 是 <div class="outer"><div class="inner"><div style="float:left"></div></div></div> → .clearfix 要加在 .inner 上，不是 .outer
• Vue/React 中，不要加在组件根节点（如 <div class="my-component">），而应加在模板里那个明确包裹 <code>v-for 浮动项的 <div> <li>如果父容器本身已设 <code>overflow: hidden、display: flow-root 或 float，它自己已在 BFC 中，再加 .clearfix 属于冗余，还可能裁剪 position: absolute 的下拉菜单

现代项目里还要手写 .clearfix 吗？

不是“要不要写”，而是“有没有必要用”：

• 父容器已是 display: flex 或 display: grid → 浮动在这些布局中本就失效，.clearfix 完全多余
• 混用浮动与传统块流（比如图文环绕、老式栅格）→ 仍需保留，但建议只在明确需要的地方加类，别全局挂载
• 用了 contain: layout、transform 或 filter → 这些会创建新的层叠上下文，可能隔离 clear 行为，此时堆 .clearfix 没用，得优先重构布局
• CSS-in-JS 环境（如 styled-components）中，类名哈希化后 .clearfix 可能不匹配，建议改用属性选择器（如 [data-clear]）或组件内联样式

真正容易翻车的，从来不是代码怎么写，而是你没意识到：父容器是否还在文档流里、有没有别的样式偷偷覆盖了 ::after、以及——你是不是还在用 float 做整体布局。