开启BFC，外边距重叠的问题

Question

如果有两个兄弟元素
<div class = "q"></div>
<div class = "w"></div>
设置样式

    .q {
        width: 100px;
        height: 100px;
        background-color: black;
        margin-bottom: 100px;
        /* overflow: hidden; */
    }
    
    .w {
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-top: 100px;
        /* overflow: hidden; */
    }

如果给任意一个设置overflow: hidden;也就是开启了BFC，那么兄弟元素还属于同一个BFC吗？
如果属于，为什么呢？如果不属于同一个，那么将不会发生外边距重叠问题，但是确实发生了，是什么原因呢？
然后

<div class="e">
    <section class="q"></section>
</div>

<section class="w"></section>

对包裹的div进行overflow: hidden;形成BFC，就可以解决外边距重叠的问题了，请问大家是什么原因呢？

Answer 1

BFC决定了元素如何对其 子元素 进行定位，以及与其他元素的关系和相互作用。

所以BFC元素本身是会发生边距重叠的。
第一种，即使是两个同时设置overflow:hidden 还是会发生重叠，虽然他本身开启了BFC,但是BFC决定的是其子元素的布局，所以两个还是属于同一个BFC环境下
第二个，e形成了BFC,q在e形成的BFC里，所以q和w是属于不同BFC的，不会发生重叠