什么是外边距塌陷以及BFC是什么？（12）

 解决方法有：

1.给一个兄弟元素设置外边距 

2.给下方兄弟元素开启bfc 
        display:inline-block 或者 position:absolute/fixed  

3.给其中一个兄弟元素设置父元素,给父元素开启BFC 
        overflow:hidden

父子元素之间的外边距合并 ：

出现原因:给父子元素设置同一方向的外边距 。

代码:

<style>
    .parent{
        width: 200px;
        height: 200px;
        background-color: red;
        margin-top: 20px;
    }
    .child{
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-top: 10px;
    }
</style>

<div class="parent">
    <div class="child">子元素</div>
</div>

 发生外边距塌陷:

解决方法有:

1.给父元素设置padding

2.给父元素设置border

3.给父元素开启BFC overflow:hidden/auto 

 什么是BFC?

 全称：Block Formatting Context，即块级格式化上下文。

BFC触发条件:

        1.html元素
        2.float不为none
        3.position为absolute fixed
        4.display:inline-block
        5.overflow不为visible

BFC作用:

        1.避免外边距重叠

        2.清除浮动

        3.阻止浮动元素覆盖非浮动元素

        4.两列布局 左侧顶宽 右侧自适应

        5.三列布局 左右定宽  中间自适应