• 不要用 作为清除手段（语义差、冗余 DOM）
• 避免在浮动元素自身上写 clear，除非你明确需要跳过前一个浮动块
• 若必须用伪元素清除，请确保 ::after 的 content 不为空字符串（IE7+ 要求至少为 " "）

推荐的清除方案及兼容性取舍

现代项目首选 overflow: hidden 或 overflow: auto 触发 BFC，简单有效，兼容到 IE6。但要注意：若父容器内有绝对定位元素且溢出需显示（如下拉菜单），overflow: hidden 会将其裁剪。

更稳妥的通用方案是伪元素清除法，适配所有支持 ::after 的浏览器（IE8+）：

.clearfix::after {
  content: " ";
  display: table;
  clear: both;
}
.clearfix {
  *zoom: 1; /* IE6–IE7 hack */
}

其中 *zoom: 1 是 IE6–IE7 专用 hack，用于触发 hasLayout；display: table 比 block 更稳妥，避免某些旧版浏览器中 display: block + clear 失效的问题。

Flex/Grid 布局中仍遇到浮动残留？检查继承与重置

即使主容器用了 display: flex，如果子元素显式声明了 float: left，该声明依然生效，并可能导致意外交互——比如 float 会覆盖 align-self 行为，或使 margin: auto 居中失效。

这不是兼容性问题，而是规范层冲突。CSS 2.1 明确规定：浮动元素不参与 Flex/Grid 布局计算。

• 在 Flex 容器内，删掉所有子元素的 float 声明
• 用 flex-wrap 替代多行浮动布局，用 justify-content 替代 text-align + float 模拟居中
• 若需兼容老版本 Safari（flex 前缀混乱），优先用 Autoprefixer，而非回退到 float

真正难处理的，是那些混合了 inline-block、float、table-cell 和 modern layout 的遗留代码——它们之间的尺寸计算、基线对齐、margin 折叠规则完全不同，必须逐层剥离验证。