'BFC margin collapsed

I want to ask one question about BFC,please see my code:

<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;
}

Why are main can add new BFC(set css overflow:hidden;) but aside will not be able to add new BFC(set css overflow:hidden;) of it.BFC is also changing the way?

htmlcss


Solution 1:[1]

quote from Visual formatting model:

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

The margins collapse under the following three conditions:

1.Vertical

2.adjacent block-level boxes

3.in a BFC

The .aside was styled overflow: hidden to generate a BFC for its descendants.However, it doesn't affect the layout outer the .aside. That is, the .main and the .aside are still in a BFC generated by the root element in this example, so the margins collapse.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Weapon

Related Questions