父元素高度塌陷是浮动脱离文档流的必然结果，非bug；clearfix伪元素需满足content非空、display为block/table、父元素无干扰overflow才生效。

父元素高度塌陷不是 bug，是浮动脱离文档流后的必然结果；用 clearfix 伪元素能解决，但必须写对，否则白加。

为什么 .clearfix::after 写了却没用

常见现象：加了 .clearfix 类，::after 也写了，但父容器还是高度为 0。
根本原因不是“没生效”，而是三个硬性条件缺一不可：
• content 值不能是 none 或空字符串未写（必须是 "" 或任意非空字符串）
• display 必须是 block 或 table（inline 不参与块级高度计算）
• 父元素不能有 overflow: hidden、auto 或 scroll —— 这些会干扰伪元素的清除行为，导致 clear: both 失效

display: table 和 display: block 哪个更稳妥

两者都能让伪元素成为块级元素并参与高度计算，但表现略有差异：
• display: table 会生成匿名表格单元格，天然带 clear 行为，兼容性略好（IE8+ 安全）
• display: block 更直观，但需额外确保它不被压缩（比如加 height: 0 + visibility: hidden 防止内容干扰）
推荐写法：

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

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

下载

.clearfix::after {<br>  content: "";<br>  display: table;<br>  clear: both;<br>}

如果项目要兼容 IE8 及更早版本，再补一句 .clearfix { *zoom: 1; }

现代项目里还该手动写 clearfix 吗

不一定。是否需要，取决于你是否还在用浮动做布局：
• 如果父容器已设 display: flex 或 display: grid，浮动子元素自动退化为普通块级元素，clearfix 完全无效且多余
• 如果只是图文环绕（如 img 左浮、文字绕排），根本不需要父容器撑高，加 clearfix 反而可能意外撑出空白
• 更推荐直接上 display: flow-root：

.container { display: flow-root; }

它专为此场景设计，创建 BFC 无副作用，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持，代码少、语义清、调试快

clear: both 加在父元素上为什么不起作用

这是最常踩的逻辑坑：
• clear: both 的作用对象是「自身」，不是子元素 —— 给父元素写 clear: both，只是让它避开前面的浮动兄弟，和内部浮动子项毫无关系
• 真正起效的位置，是浮动子元素之后的「下一个块级元素」（比如空 div 或伪元素）
• 所以 .clearfix::after 能工作，是因为它被插入到父元素末尾，作为最后一个块级子节点，执行 clear: both 后下移，从而把父容器底部“拉下来”
别在父元素 CSS 里写 clear: both，那只会让你多花十分钟调试

真正容易被忽略的是：很多开发者盯着子元素改来改去，却忘了高度塌陷的本质控制权在父元素 —— 它要不要包含浮动、用什么机制包含、是否允许溢出，全由父元素的 display / overflow / position 决定。伪元素只是手段，不是魔法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！