位置：“粘滞”会导致我的div大小加倍并覆盖上一个div

Question

我正在尝试为网格创建粘性页脚。

在页脚中添加position:sticky;和bottom:0px后，页脚的大小就会加倍，并覆盖我之前的div（网格中的一行）

之前：

之后：

这是我的代码：

    html,
    body {
      height: 100%;
      margin: 0;
    }

    .fixed_header {
      width: 300px;
      height: 300px;
      overflow: scroll;
    }

    .td,
    .th {
      background-color: antiquewhite;
      width: 100px;
      float: left;
    }

    .thead {
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
    }

    .th {
      font-weight: bold;
    }

    .tr {
      display: block;
      clear: both;
      width: 500px;
    }

    .thead>div>div:nth-child(1) {
      left: 0;
      top: 0;
      position: -webkit-sticky;
      position: sticky;
    }

    div.tbody>div.tr>div:nth-child(1) {
      position: -webkit-sticky;
      position: sticky;
      left: 0;
    }

    div.tfooter {
      position: -webkit-sticky;
      position: sticky;
      bottom:0px;
      background-color: green;
      /* width: 500px; */
    }

<div class="myGrid">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>

  </div>
  <div class="tfooter">
    this is my footer
  </div>

</div>

Answer 1

事实证明，由于某种原因，我不了解要解决的问题所需的clear:both脚印。