html - 为什么显示:table set the parent element's height to its biggest floating child element's height?

Question

例如，我有这几行代码:

<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}

为什么它会将父元素高度设置为与“child2”相同的高度？为什么不将父元素视为 block 元素(因为 div 显示为 block ，对吗？)？

此外，是否可以使用此 display:table 设置未指定父元素的高度以自动调整为其最大 float 子元素的高度？我读到我们应该避免使用表格，除非内容确实是表格。

Answer 1

有几件事情正在发生。当您使用 display:table 将非表格元素放入元素中时，非表格元素会自动包装在 anonymous objects 中。用于表格行和表格单元格。那么布局树看到的是

table
  - table-row
      - table-cell
          - child1
          - child2
          - child3

然后，所有表格单元格建立block formatting contexts ，这意味着他们 contain their floats ，很像在没有固定高度的 block 元素上使用 overflow:hidden 作为一种 clearfix。

所以表格单元格完全包含 float ，表格行包含表格单元格，表格包含表格行。这意味着表格将是最大 float 的高度。

是的，可以像这样使用 display:table。只是不要对非表格数据使用真正的 HTML 表格。