display: table 能撑开父容器是因为它将父元素转为表格框，其高度计算强制包含浮动子项，无需清除浮动即可防止坍缩。
display: table 为什么能撑开父容器
浮动元素脱离文档流，导致父级高度坍缩——display: table 把父元素变成「表格框」，而表格框天生具有包裹内部内容的特性（类似 <table> 标签行为），不依赖清除浮动也能撑高。<p>这不是 hack，是 CSS 规范定义的行为：表格框的 <code>height 计算逻辑强制包含所有子内容（包括浮动子项），且不触发 BFC 外的副作用。
- 仅对父级设置
display: table就够，子元素无需改display - 父级会变成块级表格框（
display: table默认表现等同于display: table-block），宽度仍为 100%，但高度自动适应 - 注意：它会让父级失去 margin 合并能力，相邻块级兄弟元素的垂直间距可能变大
和 clearfix 对比时的关键差异
display: table 和传统 clearfix 都解决塌陷，但机制完全不同：前者靠渲染模型切换，后者靠伪元素插入并清除浮动。
-
clearfix依赖::after+clear: both，兼容 IE8+；display: table在 IE8+ 也支持，但 IE7 及更早不认 -
display: table会重置父级的box-sizing行为——即使设了border-box，内边距和边框仍按表格模型计算（实际影响小，但调试时可能困惑） - 如果父级原本是
inline或inline-block，加display: table会强制变块级，可能破坏布局流
实际用代码怎么写才不出错
直接给父容器加样式即可，不需要额外 HTML 结构或 JS 干预。
立即学习“前端免费学习笔记（深入）”；
.container {
display: table;
width: 100%; /* 可选，table 默认撑满 */
}常见错误：
- 误写成
display: table-cell—— 这会让父级变成单元格，高度反而可能被压缩，且需配合table-row等才能正常工作 - 在 Flex 或 Grid 容器里套用
display: table—— 表格显示模式与现代布局容器嵌套时，渲染结果不可预测，尤其在 Safari 中容易出高度异常 - 父级同时设了
float—— 浮动 + 表格显示模式冲突，Chrome 可能忽略display: table，回退到普通块级表现
什么场景下别硬上 display: table
它不是万能解药。当父容器本身参与复杂布局（比如作为 Grid 子项、或需要响应式 margin/padding 控制）、或内部有垂直对齐需求时，display: table 的隐式约束会反成负担。
- 需要子元素垂直居中？
display: table-cell+vertical-align: middle才行，但这时父级已不是简单“撑高”，而是整套表格语义介入 - 父级要设
overflow: hidden做裁剪？表格框对overflow的支持不如普通块级稳定，某些安卓 WebView 下会失效 - 项目已用 PostCSS 自动插入
clearfix，临时换display: table可能导致 CSS 优先级混乱，反而更难维护
真正省事的前提是：父级只负责包裹浮动子项，不承担其他布局职责。一旦它开始“兼职”，就得重新权衡。
