BFC

BFC (Block formatting context) 全稱叫"塊級(jí)格式化上下文"
通過這個(gè)名字我們可以知道"塊", "格式化", "上下文". 我們大概可以了解,是在上下文中出現(xiàn),哪里的上下文?在html文檔中的出現(xiàn)!
那么我們?cè)趺慈ビ|發(fā)呢?

觸發(fā)

滿足下列任一個(gè)條件我們就可以觸發(fā)BFC:
1.根元素, 即HTML元素
2.float的值不為none的時(shí)候
3.overflow的值不為visible
4.display的值為inline-block、table-cell、table-caption
5.position的值為absolute或fixed
但在他們其中，最常見的就是overflow:hidden、float:left/right、position:absolute。也就是說，每次看到這些屬性的時(shí)候，就代表了該元素以及創(chuàng)建了一個(gè)BFC了

特性

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

屬于同一個(gè)BFC的兩個(gè)相鄰塊級(jí)子元素(元素都要在文檔流當(dāng)中)的上下的外邊距值會(huì)發(fā)生重疊的效應(yīng),我們把他們分開就可以消除這種重疊效應(yīng),我們來看一段代碼:

<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>

瀏覽器

瀏覽器

解決辦法:
觸發(fā)其中一個(gè)div的BFC，使得兩個(gè)div不在同一個(gè) BFC內(nèi)，這樣就可以阻止這兩個(gè)div的margin重疊

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

瀏覽器返回

2. 包含浮動(dòng)元素
   可以包含他內(nèi)部的所以元素,包括浮動(dòng)元素.

<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
元素內(nèi)容比較多的時(shí)候，內(nèi)容會(huì)環(huán)繞著浮動(dòng)的元素 


清除環(huán)繞，為其本身創(chuàng)建一個(gè)BFC

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

image.png

元素內(nèi)容比較少的時(shí)候，會(huì)出現(xiàn)高度坍塌， 足夠的文本去一個(gè)浮動(dòng)的元素 ， 浮動(dòng)元素脫離文檔流，父元素（class=second）高度就會(huì)隨著文本的減少而降低 ，父元素未被浮動(dòng)元素?fù)伍_，父元素的高度坍塌。
改變坍塌:為父元素創(chuàng)建一個(gè)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;
    }
歸納
內(nèi)部的盒會(huì)在垂直方向一個(gè)接一個(gè)排列（可以看作BFC中有一個(gè)的常規(guī)流）；
處于同一個(gè)BFC中的元素相互影響，可能會(huì)發(fā)生margin collapse；
每個(gè)元素的margin box的左邊，與容器塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此；
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然；
計(jì)算BFC的高度時(shí)，考慮BFC所包含的所有元素，連浮動(dòng)元素也參與計(jì)算；
浮動(dòng)盒區(qū)域不疊加到BFC上；
總結(jié): BFC的概念比較的抽象但是通過自己舉出的例子就會(huì)慢慢理解其中的含義.
-------------------
###參考https://blog.csdn.net/TWFKXP/article/details/80574987 
###如有錯(cuò)誤,望讀者加以斧正,萬分感謝.