父元素高度塌陷是浮动脱离文档流的必然结果，非bug；clearfix伪元素需满足content非空、display为block/table、父元素无干扰overflow才生效。
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 防止内容干扰）
推荐写法：
.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 决定。伪元素只是手段，不是魔法。
