BFC定义

BFC 的全称是 Block Formatting Context，块级格式化上下文。是用于布局块级盒子的独立渲染区域，且这个区域与外部不相关.

将处于BFC区域内和区域外的元素进行互相隔离。BFC内部的元素布局与外部互不影响。

简单的来说：BFC就是css的一个布局概念，是一个独立的区域(容器)

文档流分类

文档流分为:浮动流、定位流、普通的标准流，而普通标准流其实就是BFC中的FC.

FC：formatting context的英文缩写，翻译过来就是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及与元素之间的关系和作用。

常见的FC：BFC(块级格式化上下文)、IFC(行级格式上下文)、GFC(网络布局格式上下文)、和FFC(自适应格式上下文)。

触发BFC的条件

满足下列条件之一就可以触发BFC

根元素，即html元素;
position 值为 absolute 或 fixed
float 值不为 none
overflow 值不为 visible
display的值为inline-block、flex、table-cell

BFC的应用场景

1.场景一：防止两个相邻块级元素的上下 margin 发生重叠 (上下margin合并问题)

属于同一 BFC 的, 两个相邻块级子元素的上下 margin 会重叠，如果想让它们不重叠，可通过让这两个相邻块级子元素分属于不同的BFC。

以下示例代码中的两个盒子的上下外边距会重合（即它们都设置了10px的外边距，我们期望它们之间的间距是 20px，但实际效果却只有 10px）：

下面我们让其中一个盒子触发BFC，从而达到间隔 20px 的期望效果：

代码如下:

<div class="box1"></div>  
<div class="box2"></div>

2.场景二：清除浮动

以下示例代码中，容器元素 box1 没有设置高度：

<div class="box1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
<style>
        .box1 {
            border: solid 2px red;
            background-color: hotpink;
        }

        .box {
            float: left;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

而通过为 box1 添加 BFC 触发条件，可以让它的高度变回正常状态：

    .box1 {
            /* 触发bfc */
            overflow: hidden;
            border: solid 2px red;
            background-color: hotpink;
        }

3.场景三：实现自适应布局, 防止元素被浮动元素覆盖(左边固定, 右边自适应)

以下示例中，box2 会被设置了浮动的 box1 覆盖：

.box1 {
            float: left;
            width: 300px;
            height: 400px;
            background-color: red;
        }
        .box2 {
            height: 600px;
            background-color: blue;
        /*要避免这种覆盖行为，可以让 box2 触发 BFC,  实现布局效果, 左边固定右边自适应：*/            
        /* 触发BFC */
             overflow: hidden;
        }

BFC理解

BFC定义

文档流分类

触发BFC的条件

BFC的应用场景