display:table 本身不能清除浮动，它甚至会加剧塌陷问题——因为 table 元素默认不创建 BFC，对内部浮动子元素毫无包裹能力。
为什么给容器设 display:table 后浮动子元素仍塌陷
很多人误以为 display:table 像真实 <table> 一样“自带闭合”，其实不然。CSS 的 table 系列 display 值（如 <code>table、table-cell）只是模拟表格渲染逻辑，并不自动触发块级格式化上下文（BFC）。所以：
- 若父容器设了
display:table，但内部有float:left的 div，该容器高度仍会塌陷为 0 -
clear:both加在display:table元素上无效——它不是块级元素，默认display行为不响应clear - 用
overflow:hidden强制触发 BFC 时，若同时设了display:table，部分旧版浏览器（如 IE8）可能忽略overflow的 BFC 触发效果
真正能清除浮动的 display 值只有这三个
想靠 display 属性原生解决浮动塌陷，必须选能创建 BFC 的值：
-
display:flow-root：专为此设计，语义清晰，现代浏览器全覆盖（Chrome 64+/Firefox 59+/Safari 15.4+），clear和子浮动都能正确处理 -
display:block+overflow:hidden（或auto）：兼容性最好，IE6+ 都行，但需注意溢出内容会被裁剪 -
display:flex或display:grid：父容器一旦设为这两个值，子元素浮动即失效（float 被忽略），自然无塌陷——但这属于“绕过”而非“清除”
display:table 布局中浮动塌陷的典型修复路径
如果你已用 display:table 构建了布局（比如用 div 模拟 <table>），又不得不在某个 <code>display:table-cell 里放浮动按钮或标签，按顺序检查：
立即学习“前端免费学习笔记（深入）”；
- 先确认塌陷是否真发生在
table-cell内部：给该单元格加border:1px solid red，看边框是否包裹住浮动内容 - 若塌陷，**不要**给
table-cell设float或clear——它不支持这些行为；应改用display:flow-root替代display:table-cell（仅限该单元格） - 若必须保留
display:table-cell，则在其内部包一层div，设display:flow-root或overflow:hidden，让浮动子元素被这一层包裹 - 避免混用：不要在一个
display:table容器里，既用float排子项，又用display:flex排另一些子项——计算逻辑冲突，塌陷和错位会随机出现
table-layout:fixed 与浮动共存时的宽度陷阱
当表格布局用了 table-layout:fixed，再往里面塞浮动元素，容易触发列宽强制压缩，表现为 td 内容挤成一团、文字换行异常。这不是清除浮动没做好，而是尺寸计算优先级冲突：
-
table-layout:fixed会让表格列宽完全由第一行单元格的 width 或 col 的 width 决定，后续浮动元素的宽度请求被无视 - 清除浮动后（比如加了
overflow:hidden），还需显式重设该单元格的width:100%，否则它可能按浮动前的“收缩内容宽”渲染 - 更稳妥的做法：放弃
table-layout:fixed，改用table-layout:auto，或直接用display:flex实现等宽列
最常被忽略的一点：清除浮动不是目的，让容器正确感知高度才是。用 display:table 时，别指望它自动做这件事——得靠 flow-root、overflow 或现代布局兜底，而且必须作用在**浮动元素的直接父容器**上，隔一层就失效。
