display:table 并非真正清除浮动，而是通过启用表格格式化上下文使内部元素按表格模型布局，浮动元素不再脱离文档流，从而让父容器能正确包裹高度。
display:table 为什么能“清除”浮动？
它根本不是在“清除”浮动，而是让容器自身变成一个表格上下文（table formatting context），内部元素自动按表格行为布局，浮动元素不再脱离文档流——所以父容器能正确包裹高度。这和 clear 或 ::after 伪元素的“清除”机制完全不同，属于换了一套布局模型。
常见错误现象：display:table 设在父容器上后，子元素宽度异常收缩、文字换行错乱、或出现意外的外边距塌陷——本质是表格模型对 width、padding、margin 的处理逻辑和块级不同。
- 必须设在浮动元素的直接父容器上，不能只设在更外层
- 父容器默认变成
table行为，会忽略width:100%等设置，除非显式设table-layout:fixed - 子元素若未设
display:table-cell，浏览器会自动补一层匿名表格单元格，但可能导致盒模型不可预测
替代 display:table 的更稳妥写法
现代项目中，display:table 用于清除浮动已属过时方案。真正轻量且兼容性更好的做法是触发 BFC（块级格式化上下文）：
-
overflow:hidden（或auto）——最常用，但注意会裁剪溢出内容 -
display:flow-root——专为此设计，无副作用，Chrome 64+/Firefox 59+ 支持 -
float:left或position:absolute——虽有效，但会改变定位上下文，慎用
例如：
.container { display: flow-root; } 就能完美包裹内部浮动元素，且不引入表格语义和盒模型干扰。
立即学习“前端免费学习笔记（深入）”；
display:table-cell 会破坏浮动行为吗？
会。一旦子元素设了 display:table-cell，它就不再响应 float，因为表格单元格天然不参与浮动布局。此时再给它加 float:left 完全无效。
使用场景：只有当你明确需要表格式等宽/等高布局时，才该用 display:table-cell；如果只是想“撑开父容器”，不该动子元素显示模式。
- 父容器设
display:table，子元素保持display:block即可生效 - 若子元素同时设
display:table-cell和float，后者被忽略，控制台不会报错，但行为不符合预期 -
vertical-align在table-cell下才起作用，float下无效
IE8–IE9 下 display:table 的兼容陷阱
IE8 支持 display:table，但对嵌套层级敏感：若父容器有 position:relative 或 zoom:1，可能触发 hasLayout 冲突，导致高度计算错误或边框错位。
- 避免在
display:table容器上同时设zoom:1（这是 IE7 的 hack，IE8+ 不需要） - IE9 下若父容器有
min-width，表格模型可能忽略该约束，需配合table-layout:fixed+ 显式width - 移动端 Safari 旧版本对
display:table的border-spacing渲染不一致，慎用于带边框的布局
真要兼容老 IE，overflow:hidden 比 display:table 更可靠，且无额外渲染开销。
