为什么overflow:hidden可以解决样式坍塌

<div class="fa">
    <div class="son"></div>
</div>

.fa{
    width: 300px;
    height: 300px;
    background: red;
}
.son{
    width: 100px;
    height: 100px;
    background: blue;
    margin-top: 50px;
}

想要的是这样的，事实上是这样的

解决的方法有好几种：
1、设置overflow为选中的这几个都是可以的

2、position设置为 absolute或fixed;
3、float不为none的时候；
4、display：inline-block，table-cell， table-caption， flex， inline-flex等等。
一直不明白为什么这样设置，就可以解决坍塌问题，其实他们都让盒子进入了BFC模式。
而BFC 会阻止外边距折叠