CSS规范中对 BFC 的描述

BFC：块格式化上下文

浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和’overflow’不为’visible’的块盒会为它们的内容建立一个新的块格式化上下文
在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由’margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。
在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

MDN 对 BFC 的描述

一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建（记住）：

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素
display: flow-root（让当前元素触发BFC,没有其他任何副作用）
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

一个块格式化上下文包括创建它的元素内部所有内容（即爸爸会包住所有的儿子，不管儿子有没有浮动，怎么扩张，都会在爸爸的包围下），除了被包含于创建新的块级格式化上下文的后代元素内的元素（即子元素有另一个块格式化上下文给包着，我就不管了）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
    <style>
        .baba{
            border: 10px solid red;
            min-height: 10px;
            display: flow-root;/*触发BFC*/
        }
        .erzi{
            height: 100px;
            background: blue;
            float: left;/*儿子也触发了BFC*/
            width: 300px;
            margin-top: 200px;
        }
        .sunzi{/*有另一个块格式化上下文给包着*/
            height: 50px;
            width: 200px;
            background: green;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="baba">
        <div class="erzi">
            <div class="sunzi"></div>
        </div>
    </div>
</body>
</html>

结果演示

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

张鑫旭对 BFC 的描述

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

结尾

1. 我不知道什么是 BFC
2. 但是你写出样式，我就知道这是不是 BFC
BFC 就是这样的东西（堆叠上下文也是）
1. 它没有定义
2. 它只有特性/功能

功能1：爸爸管儿子

用 BFC 包住浮动元素。(这不是清除浮动，.clearfix 才是清除浮动）（无卵用）

功能2：兄弟之间划清界限

用 float + div 做左右自适应布局（无卵用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>具有overflow 且值不是 visible 的块元素触发BFC实现左右布局</title>
    <style>
        .gege{
            width: 100px;
            min-height: 600px;
            border: 3px solid red;
            float: left;
            /* margin-right:20px */
        }
        .didi{
            min-height: 600px;
            border: 5px solid green;
            overflow: auto;/*触发BFC后发现自己在哥哥身上，然后就把自己给拉回来*/
            /* margin-left: 110px; *?/
        }
    </style>
</head>
<body>
    <div class="gege">哥哥</div>
    <div class="didi">弟弟</div>
</body>
</html>

结果演示