为何display:table会让父元素高度匹配最高浮动子元素？

嘿，这两个问题问得很实在，我来给你掰扯清楚～

问题1：为什么display:table父元素高度和最高子元素一致，默认display:block却不会？ #

这得从两种元素的高度计算规则和浮动元素的特性说起：

• 当父元素是默认的display:block时，浮动元素会脱离正常文档流——简单说就是父元素“看不到”浮动的子元素，它的高度只会由正常流里的内容决定。如果所有子元素都浮动了，父元素就会出现高度塌陷，高度变成0（或者只有内边距/边框的高度），自然不会跟着最高子元素走。
• 而当父元素设为display:table时，它遵循的是表格布局模型：表格容器会自动包裹住内部的内容，不管子元素是不是浮动，它都会计算所有子元素的高度，然后把自己的高度拉伸到和最高的子元素一致——就像HTML原生<table>会自动适应单元格高度一样，这是CSS表格布局的固有特性。

问题2：用display:table让父元素适配最高浮动子元素高度是否合理？ #

先给结论：能实现效果，但不是最优解，原因如下：

• 你听到的“非表格内容避免用table相关布局”，主要是针对早年用HTML<table>标签做整个页面的布局（比如把头部、内容区、页脚塞进表格单元格），这种做法语义化极差，不利于维护和可访问性。但CSS的display:table属于CSS布局属性，和HTML表格标签不是一回事，不存在语义化的问题。
• 不过，现在有更合适的工具：比如Flexbox或者Grid，它们是专门为现代布局设计的，不仅能轻松实现“父元素适配最高子元素高度”，还能实现更多复杂的布局需求（比如子元素对齐、空间分配等），比display:table灵活得多。
• 退一步说，如果只是为了解决浮动导致的高度塌陷，还有更直接的方案：比如经典的clearfix伪元素方案，或者给父元素加overflow:hidden（注意有裁剪内容的副作用），这些方案更贴合“处理浮动”的场景，逻辑更清晰。

附上你的示例代码： #

HTML代码：

<div class="parent"> 
  <div class="child1">Hello</div> 
  <div class="child2">This child element has the biggest height</div> 
  <div class="child3">Just another ordinary class</div> 
</div>

CSS代码：

.parent { display: table; } 
.child1, .child2, .child3 { float: left; } 
.child1 {height: 200px} 
.child2 {height: 1000px} 
.child3 {height: 500px}

内容的提问来源于stack exchange，提问作者Richard