display:table不能清除浮动，因其不创建BFC，对内部浮动无包裹能力；旧版IE需双伪元素+zoom:1，现代推荐flow-root或flex/grid。
display:table 不能清除浮动，强行用它“清浮”反而会让塌陷更严重——这是个常见误解，得先踩住这个坑。
为什么 display:table 根本不清浮动
它只是模拟表格渲染逻辑，不创建 BFC（块级格式化上下文），对内部浮动子元素完全无包裹能力。典型现象是：父容器设了 display:table，里面两个 float:left 的 div，父容器高度直接塌成 0；给这个父容器加 clear:both 也无效，因为 display:table 元素默认不响应 clear。
IE8 及更老浏览器里怎么安全清浮
旧版浏览器（尤其是 IE6/7/8）不支持 display:flow-root，也不能靠 flex 或 grid 绕过浮动。唯一稳妥路径是双伪元素 + hack：
-
.clearfix:before, .clearfix:after必须都写，且content:""+display:table缺一不可 -
.clearfix:after单独加clear:both - IE6/7 需补
*zoom:1触发 hasLayout；IE8 虽支持 :before/:after，但单写 :after 仍可能失效，所以 :before 不能省 - 别用
display:block替代display:table—— IE8 下偶尔多出 1px 高度或清除失败
display:table-cell 里嵌浮动内容怎么办
如果你已用 display:table 布局（比如模拟三栏），又必须在某个 display:table-cell 里放浮动按钮或标签，注意：table-cell 自身不支持 float 和 clear，硬加没用。
- 首选方案：把该
table-cell改成display:flow-root（现代浏览器）或套一层div，设display:flow-root/overflow:hidden - 兼容 fallback：套的这层
div加.clearfix类，确保 IE8 下也能撑高 - 绝对不要在
table-cell上直接写float或clear，CSS 规范明确不支持
混用 display:table 和 overflow:hidden 的陷阱
有人试过给 display:table 容器加 overflow:hidden 想强制触发 BFC，结果发现 IE8 下失效——因为旧引擎里，display:table 会覆盖 overflow 的 BFC 触发行为。
立即学习“前端免费学习笔记（深入）”；
- 这不是 bug，是规范实现差异：IE8 认为 table 渲染模型优先级高于 overflow
- 若你必须保留
display:table结构，就别指望overflow:hidden能清浮，老老实实用.clearfix -
table-layout:fixed+ 浮动更危险：列宽会被冻结，浮动元素宽度请求被无视，导致内容挤成一团，这不是清浮问题，是尺寸计算冲突
display:flow-root、display:block 配 overflow、以及 flex/grid；display:table 系列从设计上就没这职责。兼容旧版时，双伪元素是唯一经得起压测的方案，但前提是每个细节都写对——漏掉 :before、少写 content:""、或误用 display:inline-block，都会让整个清除逻辑静默失效。 
