html - BFC margin 崩溃

Question

我想问一个关于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 css overflow:hidden;)了呢。BFC也在变化路？

Answer 1

引自 Visual formatting model :

Vertical margins between adjacent block-level boxes in a block formatting context collapse.

边距在以下三种情况下崩溃:

1.垂直

2.相邻的 block 级框

3.在BFC中

.aside 的样式为overflow: hidden 以为其后代生成 BFC。但是，它不会影响 .aside< 外部的布局。也就是说，.main 和 .aside 仍在本例中由根元素生成的 BFC 中，因此边距折叠。