css - 为什么我的 CSS 表格显示最大高度为 0 的元素的高度？

Question

我有一个外部 div，我将其显示为表格，还有 2 个内部 div。

第一个内部 div 向左浮动。第二个内部 div 的最大高度为 0。

.d-table {
       display: table;
      border: solid 1px black;
    }

    .float-left{
	    float: left;
    }

    .hidden{
      max-height: 0px;
      overflow-y: hidden;
	  clear: both;
    }

<div class="d-table">
      <div class="float-left">
         hey
      </div>
      
      <div class="hidden">
        cool
      </div>
    </div>

预期结果是:

实际结果是:

出于某种原因，表格考虑了高度为 0 的 div。

JSFiddle

Answer 1

似乎是由于非零 line-height 造成的div 和 vertical-align: baseline匿名细胞。

我会使用 display: table-cell为了能够使用 vertical-align: top 设置单元格样式

.d-table {
  display: table-cell;
  vertical-align: top;
  border: solid 1px black;
}
.float-left {
  float: left;
}
.hidden {
  max-height: 0px;
  overflow-y: hidden;
  clear: both;
}

<div class="d-table">
  <div class="float-left">hey</div>
  <div class="hidden">cool</div>
</div>

如果需要display: table , 那么你不能为匿名表格单元格设置样式，但你可以使用 line-height: 0 减少空间.

.d-table {
  display: table;
  vertical-align: top;
  border: solid 1px black;
}
.float-left {
  float: left;
}
.hidden {
  line-height: 0;
  max-height: 0px;
  overflow-y: hidden;
  clear: both;
}

<div class="d-table">
  <div class="float-left">hey</div>
  <div class="hidden">cool</div>
</div>