css margin 兄弟上下合并 经典bug

<!--

问题：当两个兄弟盒子 一个margin-bottom一个margin-top

的时候，就会取其中一个的最大值。

解决方案：给任何一个盒子触发bfc

如何触发bfc：

1.overflow: hidden;

2.float: left/right;

3.display: inline-block;

4.position: absolute;

-->

一般不解决

css

    *{
        margin: 0px;
        padding: 0px;
    }
    .box1{
        height: 100px;
        background: red;
        margin-bottom: 100px;
    }
    .box2{
        height: 100px;
        background: yellow;
        margin-top: 100px;
    }
    .box1_bfc{
        overflow: hidden;
    }

html

    <div class="box1_bfc">
         <div class="box1"></div>
     </div>
    <div class="box2"></div>