IE8下.clearfix必须同时定义:before和:after伪元素，仅写:after会失效；:before需content:""和display:table，:after需clear:both；IE8不需*zoom:1；table-cell内清浮须外包div；overflow:hidden在display:table容器中对清浮无效。
IE8下.clearfix必须同时写:before和:after
只写 .clearfix:after 在 IE8 中大概率失效，哪怕它支持伪元素。IE8 的渲染引擎对伪元素的触发有隐式依赖：必须成对出现且 :before 的 content:"" + display:table 才能正确建立“包裹上下文”。漏掉 :before，:after 的 clear:both 就像悬在空中——父容器依然塌陷。
常见错误写法：
.clearfix:after {
content: "";
display: block;
clear: both;
}
正确写法必须包含：
-
:before和:after都要定义 -
:before的content:""不可为空字符串以外的值（如content:"."可能触发 IE8 渲染异常） -
:before必须设display:table（不是block或inline-block） -
:after设clear:both，且推荐加height:0; visibility:hidden;避免意外占位
IE6/7兼容需补*zoom:1，但IE8不需要
IE6/7 不支持伪元素，靠 *zoom:1 触发 hasLayout 强制父容器“感知”浮动子元素；IE8 已支持 :before/:after，所以 *zoom:1 是冗余的，加了反而可能干扰某些布局（比如与 position:relative 组合时引发定位偏移）。
立即学习“前端免费学习笔记（深入）”；
如果你的目标是 IE8+，直接去掉 *zoom:1 更干净。若项目仍需支持 IE6/7，则保留，但注意：*zoom:1 必须写在选择器末尾，且不能和现代属性混在同一声明块里被 CSS 压缩工具误删。
display:table-cell里不能直接清浮，得套一层.clearfix
如果父容器用了 display:table，而某个子单元是 display:table-cell，又恰好要在里面放浮动按钮或标签——别试图给 table-cell 加 .clearfix。CSS 规范明确禁止 table-cell 上使用 float 和 clear，浏览器会静默忽略。
可行路径只有一条：在 table-cell 内部包一层 <div>，再给这层加 <code>.clearfix 类。这层 div 的作用不是“清浮”，而是提供一个可触发 BFC 的容器边界，让浮动内容不逃逸出 cell 范围。
示例结构：
<div class="table-wrapper">
<div class="table-row">
<div class="table-cell">
<div class="clearfix">
<button style="float:right">操作</button>
</div>
</div>
</div>
</div>
overflow:hidden在IE8 + display:table组合下完全失效
有人想走捷径：给 display:table 容器加 overflow:hidden，指望它像普通 block 元素那样触发 BFC 来包裹浮动。但在 IE8 中，display:table 的渲染优先级高于 overflow，结果就是 overflow:hidden 被无视，高度照样塌陷。
这不是 bug，是 IE8 对 CSS2.1 表格模型的严格实现。一旦你选了 display:table，就等于放弃了用 overflow 清浮这条路。此时唯一可靠方案仍是双伪元素 + 正确声明的 .clearfix。
容易被忽略的一点：即使你没主动写 display:table，某些第三方 UI 库（比如旧版 Bootstrap 2 的栅格）内部用了 table 模拟布局，也会悄悄触发这个陷阱。
