BFC(Block Format Context): 块级格式化上下文

margin的小BUG——塌陷问题

<div class="wrap">
    <div class="content"></div>
</div>

        .wrap{
            width: 100px;
            height: 100px;
            background-color: black;
            margin-left: 100px;
            margin-top: 100px;
        }
        .content{
            width: 50px;
            height: 50px;
            background-color: red;
            margin-left: 50px;
            margin-top: 50px;
        }

此时margin-top: 50px;并不能显示效果。这就是margin的塌陷问题，子类的margin在垂直方向会出bug。 只有当子类的垂直方向的margin值大于父类时，才能挪动位置，但，却是父类随子类一起挪动

解决方法：BFC(block format context),块级格式化上下文

原理：让渲染规则发生改变。特定的盒子会遵循另一套语法规则。

如何触发一个盒子的bfc：

position:absolute;
display:inli