什么是BFC(Block Formatting Context)(块级格式化上下文)

前言：为什么要了解BFC呢，因为遇到了css中可以使用overflow：auto | hidden | scroll 进行清除浮动，就是因为BFC中的布局规则：计算BFC的高度时，浮动元素也参与计算。（清除浮动）。所以就想要了解一下BFC是什么东西。

一、什么是BFC

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和互相作用。最常见的 Formatting context 有 Block formatting context（简称BFC）和 Inline formatting context（简称IFC）。Block formatting context直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box 参与，它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相关。通俗地讲，BFC是一个容器，用于管理块级元素。

二、如何创建BFC（重要）

1. float : left | right

2. overflow : auto | hidden | scroll 

3. display : table-cell | table-caption | inline-block | inline-flex | flex (FFC) 

4. position : absolute | fixed

5. 根元素

三、BFC布局规则（重要）

1. 内部的Box会在垂直方向，一个接一个的放置（即块级元素独占一行）。

2. BFC区域不会与float box 重叠（利用这点可以实现自适应两栏布局）。

3. 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠（margin重叠三个条件：同属于一个BFC；相邻；块级元素）。

4. 计算BFC的高度时，浮动元素也参与计算。（清除浮动）。

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。

贴个视频教学连接吧，讲解的也比较详细。

搞懂BFC规则与应用【秋招就业提高课程】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1J64y147eS?spm_id_from=333.337.search-card.all.click&vd_source=8738b1b5951364ec5924323079c23b14