::after清除浮动需配合display: table或display: block+clear: both，仅content: ""无效；clear必须加在伪元素上；现代推荐display: flow-root，ie兼容仍用::after。
为什么 ::after 能清除浮动，但直接写没用
因为 ::after 生成的是**行内内容**，默认不参与块级格式化上下文（BFC），对父容器高度塌陷毫无影响。必须配合 display: table 或 display: block + clear: both 才能触发清除行为。
常见错误是只写 content: ""，忘了设 display 和 clear —— 这时伪元素存在，但完全不起作用。
-
display: table是最稳妥的选择：它自动创建 BFC，且无边距/对齐副作用 -
display: block也可用，但需额外确保它“撑开”父容器（比如不被折叠） - 必须声明
content: ""，否则伪元素不会渲染（哪怕值为空字符串）
clear: both 加在 ::after 上还是父元素上
加在 ::after 元素自身上。它的作用是让这个伪元素“避开所有浮动”，从而把父容器的底部边界推到浮动元素下方。
如果加在父元素上，根本无效——clear 只对**块级盒**生效，且仅影响该盒的**后续兄弟元素或自身内容流**，不是用来“清理子元素浮动”的魔法开关。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 正确：
.clearfix::after { content: ""; display: table; clear: both; } - ❌ 错误：
.clearfix { clear: both; }（父元素本身没浮动，clear 对它无意义） - ⚠️ 注意：
clear不会改变浮动子元素的位置，只影响伪元素所在行的垂直位置
兼容性与现代替代方案的取舍
::after 清除法在 IE8+ 完全可用，但本质是 hack——它靠生成一个“看不见却占位”的块来强行撑高容器。现在更推荐用 display: flow-root，原生、语义清晰、无伪元素开销。
-
display: flow-root在 Chrome 64+/Firefox 59+/Safari 15.4+ 支持良好，IE 完全不支持 - 若需支持 IE，仍得用
::after方案；若项目已放弃 IE，flow-root应为首选 - 不要混用：同时写
flow-root和::after清除，后者会被忽略，但代码冗余且易误导维护者
实际应用中容易漏掉的细节
最常被忽略的是父容器的 zoom: 1（IE 专有 hack）——虽然现代浏览器不需要，但如果项目还在维护旧版 IE，漏掉它会导致 IE6/7 下清除失效。
另一个隐形坑：伪元素默认继承父元素的字体样式，若父元素设了 font-size: 0 或 line-height: 0，可能让 display: table 的基线计算异常（极少见，但调试时会卡住）。
- IE6/7 兼容写法要补：
.clearfix { *zoom: 1; }（*是 IE 专属前缀） - 避免在父元素上设置
font-size: 0后又依赖::after做清除，除非明确测试过表现 - 伪元素无需设
visibility: hidden或opacity: 0——content: ""本就不占视觉空间
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
