display:table不能解决浮动塌陷，因其不创建BFC，对浮动子元素“视而不见”；真正有效的方案是display:flow-root、display:block+overflow:hidden或display:flex/grid。
display:table 不能解决浮动自适应问题，它甚至会让塌陷更难察觉——因为表格显示模式本身不创建 BFC，对内部浮动子元素完全“视而不见”。
为什么 display:table 看起来像能撑开高度？
有人看到加了 display:table 后父容器有高度，误以为“生效了”。其实那高度来自内容文本的行高或内边距，不是被浮动子元素撑出来的。只要子元素一浮动，父容器实际高度仍为 0（用 border:1px solid red 一测就露馅）。
- Chrome/Firefox 中，
display:table容器对clear:both完全不响应——它不是块级上下文，clear属性在此无效 - IE8 下若同时设
display:table和overflow:hidden，BFC 可能被忽略，导致清除失败 - 把
display:table用在 flex 或 grid 子项里，渲染结果不可预测，Safari 尤其容易出高度异常
哪些 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-cell，怎么修浮动塌陷？
别给 table-cell 加 float 或 clear，它根本不支持这些行为。正确路径是：
立即学习“前端免费学习笔记（深入）”；
- 先确认塌陷是否真发生在该单元格内：加
border看是否包裹住浮动内容 - 优先用
display:flow-root替换掉那个table-cell（仅限该元素） - 若必须保留
table-cell，就在里面嵌一层div，设display:flow-root或overflow:hidden - 避免混用：同一个
display:table容器里，不要既有浮动子项，又有flex子项——尺寸计算冲突，错位和塌陷会随机出现
真正要动手改的，永远是浮动元素的**直接父容器**，不是表格本身；display:table 是布局模拟手段，不是清除工具——把它当“万能胶”用，只会让问题藏得更深。
