在table-cell元素中使用float属性会将先前的内容向下滑动

令人着迷的行为。我有几种理论。尽管我同意使用display: table-cell似乎是随机的，但偶尔也有使用，因此我将其留在此处供我回答。如果我的答案过于复杂，我感到抱歉。我将尝试简化它：

首先

要了解为什么将元素向下推，是要了解table-cells的垂直对齐方式：

唯一vertical-align应该用于属性值table-cells为top，middle和bottom（见这个优秀的CSS-技巧文章）。其他任何事情都是不确定的行为-意味着浏览器可以随心所欲地做任何事情，不同的浏览器可能会做不同的事情。这可能不是我们想要的。

默认情况下，浏览器将提供所有td元素vertical-align: middle。因此，当您创建普通HTML时table，您不必不必担心该vertical-align属性。

另一方面，默认情况下，所有普通元素都具有vertical-align: baseline。元素上的此值display: table-cell导致我们可怕的未定义行为。

您正在使用默认情况下不会表现得像表的元素来手动构建表（这就是为什么display: table-cell当您不确定要做什么时可能不应该使用的原因）。因此，您必须自己放置表格的所有默认样式。这包括vertical-align: top|middle|bottom为您指定的属性.cell。

那么为什么只在将元素浮动到一个单元格时才将其推下？

同样，这是未定义的行为。当您不漂浮时，这似乎不会引起问题。元素仍然能够智能地找到内部文本的基线并使其垂直对齐，以便它们出现在您期望的位置。当您漂浮在这里时，有两件事要注意：

1）请记住，浮动会从DOM的正常流程中删除一个元素。这意味着其他元素（包括该元素的父元素）不能像通常那样与该元素交互。

2）记住table-cells是聪明的；他们可以动态，垂直地安置孩子。

结合这两个因素，我想到在浮动这些元素时：

1）他们的.cell父母不知道文本在他们里面的位置。

2）它不能正确地与其基线所在的相邻单元通信-它仅使用其底部边缘。

3）相邻单元格将其内容正确垂直对齐到该基线，从而导致向下移动。

解决办法？

将vertical-align: middle负责对您.cellS：

.cell {
    display: table-cell;
    vertical-align: middle;
}

（a标签也应该是display: inline-block）。这是更新的JSFiddle。问候。