css - 粘性页脚 : Why is :after needed?

Question

在下面的代码中，为什么需要 .page-wrap:after？

理论上，如果没有这个，粘性页脚不应该工作吗？为什么不呢？

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

Answer 1

这是为您的页脚预留空间。由于 .page-wrap 的负边距导致页脚向上拉，因此 .page-wrap 的底部需要有一个空白的“预留”空间，所以.page-wrap 中的内容不会在 .site-footer 下结束。

.page-wrap:after 就是这样做的，它在 .page-wrap 的底部添加了一个空白的“保留”空间供页脚填充。