混淆积极填充和负边距

Question

我有以下代码正在做我想要的但我很困惑为什么以及为什么需要正填充底部和负边距底部。有人可以解释一下吗？

.parent {
  width: 100%;
  overflow: hidden;
}

.left {
  width: 20%;
  float: left;
  background-color: blue;
}

.right {
  width: 80%;
  float: right;
  background-color: red;
}

.left,
.right {
  padding-bottom: 8000px;
  margin-bottom: -8000px;
}

.clr {
  clear: both;
}

<div class="parent">
  <div class="left"></div>
  <div class="right">
    float right div dynamic content here<br /> dynamic row<br /> dynamic row<br /> dynamic row<br /> dynamic row<br /> dynamic row<br /> dynamic row<br /> dynamic row<br /> dynamic row<br /> dynamic row<br /> dynamic row<br />
  </div>
  <div class="clr"></div>
</div>