伪元素清浮动必须设 content: " " 且父容器加 *zoom: 1，否则 IE8 中失效；display: table 是唯一可靠显示方式，overflow: hidden 或绝对定位等会干扰清除效果。
伪元素清浮动必须加 content，否则在 IE8 里完全不生效
IE8 支持 ::after，但对空伪元素极其严格：content: "" 在某些 IE8 渲染模式下会被忽略，导致伪元素根本没创建，clear: both 彻底失效。最稳妥的做法是用 content: " "（一个空格），它能被所有 IE8+ 稳定识别。
常见错误现象：父容器高度仍为 0，背景色/边框消失，后续元素上移——十有八九是 content 值为空字符串或被遗漏。
-
content: ""→ IE8 某些文档模式下静默失败 -
content: " "→ 推荐，兼容性最稳 -
content: none或省略content→ 伪元素不渲染，清除逻辑归零
display: table 是 IE8 下唯一可靠的选择
很多人改用 display: block 图省事，但在 IE8 中它无法保证伪元素参与格式化上下文计算，尤其当父容器有 line-height、vertical-align 或嵌套表格样式时，高度撑不开。
display: table 能天然生成匿名 BFC 容器，让伪元素真正“占位”并影响父容器高度，这是 IE8 兼容性的关键。
立即学习“前端免费学习笔记（深入）”；
- 别用
display: inline-block→ 受空白符干扰，间隙不可控 - 别用
display: flex或display: grid→ IE8 完全不识别 -
height: 0和visibility: hidden可加可不加，但加了要小心：font-size: 0的父容器可能连空格都吃掉
IE8 需要 *zoom: 1 触发 hasLayout，但只写一次就够了
IE8 已支持 ::after，但部分渲染路径仍依赖 hasLayout 才能让伪元素正确参与布局流。这时只需给父选择器加 *zoom: 1（注意是带星号的 hack 写法），不需要再补 :before 或双伪元素。
常见错误：把 *zoom: 1 加在 ::after 规则里，或者误写成 zoom: 1（IE8 不认无前缀的 zoom）。
-
.clearfix { *zoom: 1; }→ 正确，作用于父容器 -
.clearfix::after { *zoom: 1; }→ 无效，伪元素本身不支持 zoom - 现代项目若已放弃 IE6–7，
*zoom: 1就是 IE8 的最后防线，不必多加
别让其他 CSS 干扰伪元素的清除行为
即使写对了 ::after，以下几种情况仍会让清除失效：
- 父容器设了
overflow: hidden或auto→ BFC 已提前闭合，clear: both失去作用对象 - 父容器是
position: absolute且未设width/height→ 伪元素尺寸计算异常 - 子元素用了负
margin-top→ 与伪元素的clear发生定位冲突，优先改用margin-bottom - 父容器本身是 Flex/Grid 容器 → 浮动已失效，加
.clearfix不但没用，还可能干扰flex-wrap
真正容易被忽略的是：伪元素清除只对「浮动元素的直接父容器」有效。如果中间隔了一层非浮动 wrapper，::after 就清不到目标 —— 这不是代码写错，是结构没对准。
