clearfix必须用::after而非::before，因其作为最后“视觉子节点”设clear: both才能截断浮动流；content: ""不可省略，否则伪元素不渲染；height: 0和visibility: hidden缺一不可，分别控制空间占用与可见性交互；flow-root可替代但兼容性有限，旧版Safari及全部IE不支持。
clearfix为什么必须用::after而不是::before
因为::before插入在内容最前面，无法影响父容器对后续浮动子元素的高度计算；而::after作为最后一个“视觉子节点”，在其上设置clear: both才能真正把浮动流“截住”，让父容器重新包裹全部浮动子项。如果误用::before，伪元素会出现在浮动元素上方，起不到撑开高度的作用。
content属性为什么不能省略
::after（和::before）是CSS生成的内容，属于“无内容则无渲染”的类型——即使写了display: block、clear: both，只要content值为none或完全缺失，该伪元素就不会被创建，整个clearfix逻辑就失效。
- 必须写成
content: ""（空字符串），不是content: " "（空格）或content: null - 部分旧版IE（如IE6/7）要求
content: "."配合*zoom: 1触发hasLayout，但现代项目可忽略 - 写
content: "\00a0"（不换行空格）也能生效，但没必要，""最简洁明确
visibility: hidden和height: 0能不能只留一个
不能。两者缺一不可，作用不同：
-
height: 0防止伪元素占据垂直空间，避免意外撑高容器 -
visibility: hidden确保伪元素不可见且不响应交互（opacity: 0仍会捕获鼠标事件） - 只设
height: 0但没隐藏，伪元素虽不可见却仍可能在某些浏览器中触发重排抖动 - 只设
visibility: hidden但没清空高度，它仍会以默认line-height撑开一行空白
常见错误写法：.clearfix::after { content: ""; clear: both; display: block; }——漏掉height: 0和visibility: hidden，在复杂嵌套或缩放场景下容易引发布局偏移。
立即学习“前端免费学习笔记（深入）”；
现代替代方案是否真能取代clearfix
display: flow-root确实能触发BFC并自然包含浮动子元素，写法更简洁：.container { display: flow-root; }。但它有兼容性断层：
- Chrome 58+/Firefox 53+/Safari 15.4+ 支持，但Safari 15.3及更早版本不支持
- 所有IE版本（包括IE11）完全不识别
flow-root - 若项目需支持iOS Safari clearfix仍是唯一稳妥选择
真正容易被忽略的点：很多人以为加了clearfix就一劳永逸，但若父容器本身设置了height或max-height，或者子元素用了transform脱离文档流，clearfix照样失效——它只解决纯float导致的高度塌陷，不是万能布局修复器。
