BFC(块级格式化上下文)

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
下列方式会创建块格式化上下文(常用的)：

根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
overflow 值不为 visible 的块元素
display 值为 [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）

BFC的作用

清除浮动

两个同级元素同时像一个方向浮动,在宽度够的情况下会显示在同一行,我们通常使用给父元素添加overflow:hidden来触发BFC
原理:块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

   <style>
       *{
            margin:0;padding:0
        }
        .box1{
            background-color: red;
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
  </style>
<body>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>

解释: box1的overflow:hidden触发了BFC,box1内两个p在同一个BFC内浮动定位,紧贴在一起.box2内的p和box1的p不在同一个BFC内,所以box2内的p浮动定位的时候就不会找box1的p,就达到了清除浮动的效果

外边距折叠以及margin-top失效的问题

外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

<style>
        *{
            margin:0;padding:0
        }
        .box1{
            margin-bottom:10px
        }
        .box2{
           margin-top:15px
        }
</style>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>

此时两盒子间距15px,而不是25px
为了解决如下问题,我们可以在box1中嵌套一个盒子,并给盒子添加一个overflow:hidden来触发BFC,两个盒子不在同一个BFC中就可以

margin-top失效问题

<style>
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
                border: 1px solid #000;
                overflow: hidden;//如果不添加overflow:hidden,两盒子会被一起顶下去
            }
            .box2 {
                width: 100px;
                height: 100px;
                background-color: blue;
                margin-top: 20px;
            }
</style>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>