html - BFC利润率崩溃

我想问一个关于BFC的问题，请看我的代码：

<div  class="main">
   <div class="aside"></div>
</div>


.main{
  height: 200px;
  background-color: green;
  width: 300px;
  margin:100px 0;
}
.aside{
  width: 100px;
  height: 150px;
  background-color: red;
  margin:100px 0;
}

为什么main可以添加新的BFC（set css overflow:hidden；）但是aside不能添加新的BFC（set cssoverflow:hidden;）呢。BFC也在改变方式？

最佳答案

引自Visual formatting model：
块格式上下文中相邻块级框之间的垂直边距折叠。
在以下三种情况下，利润率会崩溃：
1.垂直
2.相邻块级箱
3.在BFC中
.aside的样式设置为overflow: hidden为其后代生成BFC，但是它不影响.aside外部的布局。也就是说，在本例中，.main和.aside仍在根元素生成的BFC中，因此边距会塌陷。