BFC概念与解决外边距穿透问题

什么是BFC?

BFC（Block Formatting Content）：块级格式化上下文,是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。可以把BFC看做一个盒子，盒子内部的元素与外部元素布局上互不影响。

（我也只是在网上搜索了一些资料，做了一点整理），BFC常见的应用场景：

1.垂直外边距合并问题

 main{
            width: 1000px;
            height: 600px;
            margin: 0px auto;
            background-color: #e3f3ff;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px;
        }

<main>
    <div id="d1"></div>
    <div id="d2"></div>
</main>

最上面的div上边距没能把父元素main撑开，解决办法给main添加 overflow：hidden;

还有一种就是两div之间的margin值重叠，如果需要解除影响，
可以给两个div分别再添加一层父元素section，对添加的section元素设置 overflow：hidden； 或者在main添加 overflow：hidden的基础上，对下面的div设置display: inline-block;

  main{
            width: 1000px;
            height: 600px;
            margin: 0px auto;
            background-color: #e3f3ff;
           ******   overflow: hidden;       //转为BFC
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px;
        }

2.用于清除浮动

   main{
            width: 1000px;
            margin: 0px auto;
            background-color: #e3f3ff;
        }
        div{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }

<main>
    <div></div>
</main>

这种情况父元素没有设置高度的情况下，浮动的子元素div不能撑开父元素main的高度，
给父元素添加 overflow：hidden 即可；

3.处理文字环绕 的问题

main{
            width: 1000px;
            height: 200px;
            margin: 0px auto;
            background-color: #e3f3ff;
            overflow: hidden;  //转为BFC
        }
        div{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        p{
            height: 150px;
            background-color: orange;
        }

<main>
    <div></div>
    <p>练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客
        练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客
        练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客
        练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客
        练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客练习写博客
    </p>
</main>

可以看到，文本所在的元素背景占据了一行，因为背景为红色的元素是浮动元素，所以脱离了文档流，而文本围绕着红色元素，这不是我们想要的效果，这时可以给第二个元素触发BFC将它们区分开来：

虽然可以用BFC可以解决以上问题，但是给元素添加触发BFC的属性也带了一些副作用，所以尽量选择合适的属性解决问题