溢出：隐藏如何阻止父母在浮动它的孩子时崩溃？

Question

下面的代码会阻止clearfix父元素在其两个子元素都浮动时折叠。

有谁能告诉我它是如何工作的？

.clearfix {
  overflow: hidden; /* can also be "auto" */
}

<div class="clearfix">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>