必须写 content: ""，否则 ::after 不渲染，clear: both 无效；需搭配 display: block 才能清除浮动；现代推荐用 display: flow-root 替代。
为什么 ::after 清浮动必须写 content
不写 content，::after 伪元素根本不会渲染，也就起不到清除浮动的作用。浏览器规范里明确要求：可替换元素（如伪元素）若 content 为 none 或空字符串且无其他内容生成机制，就视为不存在。
常见错误现象：div::after { display: block; clear: both; } 看似合理，但没 content，DOM 中压根没插入任何节点，clear 自然无效。
-
content: ""是最简可行解；空字符串已足够触发渲染 -
content: " "（空格）也行，但多一个空白字符，无必要 -
content: "."或其他可见字符会意外显示点或符号，需额外visibility: hidden或font-size: 0 - 不要用
content: none—— 它等价于不创建伪元素
clear: both 为什么只对块级元素生效
clear 属性本身只影响**块级框**的定位行为。如果 ::after 伪元素默认是内联（inline），即使加了 clear: both，它也不会“推开”浮动元素，因为内联框不参与块格式化上下文的清除逻辑。
使用场景：清除父容器内多个 float: left 的子项后的内容塌陷。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
display: block（或table、flex等块级显示类型） -
display: inline-block不行 —— 它仍是行内级参与布局 - 现代写法中有人用
display: table，因它天然创建 BFC 且无需content，但兼容性略弱于block - 注意：IE8+ 支持
display: block+content: ""，是稳妥组合
用 overflow: hidden 替代伪元素？风险在哪
它确实能触发 BFC 清除浮动，代码更短，但副作用明显，不是“更简单”的替代方案。
性能 / 兼容性影响：在老旧 Android WebView 或某些嵌套滚动场景下，overflow: hidden 可能意外截断阴影、圆角、固定定位子元素，甚至干扰 position: sticky 行为。
- 当容器有
border-radius且子元素超出边界时，圆角会被硬裁剪 - 若内部有
position: fixed元素，其定位参考可能变成该容器而非视口 - 配合
transform或will-change时，可能触发非预期的合成层，增加内存开销 - 语义上也不清晰 —— 你本意是清浮动，却改了溢出行为
现代项目里还该手写 ::after 清浮动吗
大多数情况不该。Flex 和 Grid 布局已让浮动退居为“特殊排版技巧”，不再承担主要布局职责。
容易被忽略的地方：即便保留浮动用法（比如图文环绕），也建议优先用 display: flow-root —— 它专为创建无副作用的 BFC 而生，一行解决，无需伪元素、content 或 clear。
-
display: flow-root在 Chrome 58+、Firefox 53+、Safari 10.1+ 已稳定支持 - 它不改变盒模型尺寸，不引入新节点，不影响选择器权重
- 若需兼容 IE11，再回退到
::after方案，而不是强行 polyfillflow-root - 别为了“统一风格”在 Flex 容器里还加一层
::after清浮动 —— 那既无意义又埋了冗余
