display:table不能清除浮动，因其不创建BFC，无法包裹内部浮动子元素，反而加剧塌陷；真正有效的方案是display:flow-root、display:block+overflow:hidden或display:flex/grid。
display: table 不能清除浮动，强行用它“清浮”反而会让父容器高度塌陷更彻底——这是个高频误操作。
为什么 display: table 根本不触发 BFC
它只是模拟表格渲染逻辑，不创建块级格式化上下文（BFC），对内部 float 子元素完全无包裹能力。典型现象是：
- 父容器设了
display: table，里面两个float: left的 div，父容器offsetHeight仍为 0 - 给这个父容器加
clear: both无效——display: table元素默认不响应clear - 若同时设了
overflow: hidden，在 IE8 等旧引擎中可能被display: table覆盖，BFC 触发失败
哪些 display 值真能原生清除浮动
只有三类值能靠自身语义创建 BFC 并正确包裹浮动子项：
-
display: flow-root：W3C 明确定义的 BFC 触发方式，现代项目首选，Chrome 64+/Firefox 59+/Safari 15.4+ 全支持 -
display: block+overflow: hidden（或auto）：兼容性最好（IE6+），但会裁剪position: absolute、阴影、下拉菜单等溢出内容 -
display: flex或display: grid：浮动子元素的float属性直接失效，自然无塌陷——但这属于“绕过”，不是“清除”
如果已用 display: table 布局，怎么救
别改整个结构，只在具体出问题的单元格上动刀：
立即学习“前端免费学习笔记（深入）”；
- 若塌陷发生在
display: table-cell内部：不要给它加float或clear（规范不支持），而是把它替换成display: flow-root - 若必须保留
display: table-cell：在其内部包一层<div>，设display: flow-root或overflow: hidden - 若需兼容 IE8：这层
<div>加.clearfix类，确保伪元素双写（::before和::after）、content: ""、display: table、clear: both全到位
真正要盯住的，是那个写了 float: left 却没处理父容器 BFC 的 div——它不会报错，只会悄悄塌陷，直到你发现背景色和边框都消失了。
