什么是BFC?

BFC

BFC (Block formatting context) 全称叫"块级格式化上下文"
通过这个名字我们可以知道"块", "格式化", "上下文". 我们大概可以了解,是在上下文中出现,哪里的上下文?在html文档中的出现!
那么我们怎么去触发呢?

触发

满足下列任一个条件我们就可以触发BFC:
1.根元素, 即HTML元素
2.float的值不为none的时候
3.overflow的值不为visible
4.display的值为inline-block、table-cell、table-caption
5.position的值为absolute或fixed
但在他们其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了

特性

1. 阻止垂直外边距(margin-top, margin-bottom)折叠

属于同一个BFC的两个相邻块级子元素(元素都要在文档流当中)的上下的外边距值会发生重叠的效应,我们把他们分开就可以消除这种重叠效应,我们来看一段代码:

<style>
    .dv {
        width: 400px;
        height: 400px;
        border: 1px solid slateblue;
    }

    .dv2 {
        width: 200px;
        height: 100px;
        background: salmon;
        margin-bottom: 30px;
    }


    .dv3 {
        width: 200px;
        height: 100px;
        margin-top: 60px;
        background: seagreen;
    }

    <div class="dv">
        <div class="dv2">
        </div>       
           <div class="dv3">
             IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
          </div>
  </div>

浏览器 浏览器

解决办法:
触发其中一个div的BFC，使得两个div不在同一个 BFC内，这样就可以阻止这两个div的margin重叠

 .dv4{
        /* overflow: hidden; */
        /* display: inline-block; */
        position: absolute;  
    }

浏览器返回

2. 包含浮动元素
   可以包含他内部的所以元素,包括浮动元素.

<style>
 .second{
        width: 400px;
        padding: 10px;
        border: 1px solid slateblue;

    }
    .float{
        float: left;
        width: 200px;
        height: 50px;
        background: salmon;
    }
    .s1{

        background: slategray;

    }

</style>  
<div class="second">
        <div class="float">
        </div>
        <div class="s1"> 
            IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
            IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ;
        </div>
    </div>   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
元素内容比较多的时候，内容会环绕着浮动的元素 


清除环绕，为其本身创建一个BFC

   .s1{
        overflow: hidden;
        background: slategray;
    }

image.png

元素内容比较少的时候，会出现高度坍塌， 足够的文本去一个浮动的元素 ， 浮动元素脱离文档流，父元素（class=second）高度就会随着文本的减少而降低 ，父元素未被浮动元素撑开，父元素的高度坍塌。
改变坍塌:为父元素创建一个BFC

        width: 400px;
        padding: 10px;
        border: 1px solid slateblue;
        overflow: hidden;
       //或者 overflow: auto;
    }
--------------------- 
###参考
.second{
        width: 400px;
        padding: 10px;
        border: 1px solid slateblue;
        overflow: hidden;
       //或者 overflow: auto;
    }
归纳
内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
处于同一个BFC中的元素相互影响，可能会发生margin collapse；
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上；
总结: BFC的概念比较的抽象但是通过自己举出的例子就会慢慢理解其中的含义.
-------------------
###参考https://blog.csdn.net/TWFKXP/article/details/80574987 
###如有错误,望读者加以斧正,万分感谢.