Sticky Footer: Why is :after needed?

Question

In the following code why is .page-wrap:after needed?

Theoretically, shouldn't the sticky footer work without this? Why does it not?

* {
  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

It's to make a reserved space for your footer. Since the footer is pulled upwards due to the negative margin on .page-wrap, there needs to be a blank "reserved" space at the bottom of .page-wrap so that the content inside of .page-wrap doesn't end up underneath the .site-footer.

The .page-wrap:after does just that, it adds a blank "reserved" space for the footer to fill at the bottom of .page-wrap.