一.BFC的定义
BFC(Block formatting context)，即"块级格式化上下文"
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC元素特性表现原则：内部子元素再怎么变动，都不会影响外部元素。
BOX的解释：CSS布局的基本单位
可以理解为整个CSS布局是由各种各样的Box堆砌在一起(渲染)显示的。元素的类型和display属性，决定了Box的类型，由类型决定参与何种 Formatting Context（一个决定如何渲染文档的容器），渲染方式不同决定了元素不同的显示结果。盒子分类：
block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
Formatting context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC的通俗理解：
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
二、BFC布局规则和满足条件
-
1.内部的Box在垂直方向上，一个接一个地放置（由于根元素也会生成BFC，页面默认的排列方式就是从上到下）。 -
2.内部的Box在水平方向上，子元素margin box left紧靠父级border box left（默认从左到右格式化排列，右浮动从右向左）。 -
3.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（外边距的合并现象） -
4.BFC的区域不会与float box重叠（浮动也会生成BFC）。 -
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
-
5.计算BFC的高度时，浮动元素也参与计算（overflow清除浮动的由来）。 -
总之，在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 **折叠的结果：**两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
注意：产生折叠的必备条件：margin必须是邻接的
两个margin是邻接的必须满足以下条件：
1.必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
2.没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
3.都属于垂直方向上相邻的外边距，可以是下面任意一种情况:
1.元素的margin-top与其第一个常规文档流的子元素的margin-top
2.元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
3.height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
4.高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
接下来将列举出例子：
（1）在BFC下，内部的Box会在垂直方向一个接一个的放置：
效果如下：
（2）Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠:
效果如下：
（3）在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）,即使存在浮动也是如此
box3的样式如下：
效果如下：
（4）BFC区域不会与浮动的元素重叠
一般情况下，浮动元素会脱离普通文档流，覆盖其它元素，例如：
效果如下：
将main设置为BFC：
可以看出，BFC区域不会与浮动的元素重叠
（5）计算BFC的高度时，浮动元素也参与计算
三、BFC的生成和常见用法
1、根元素
2、float属性不为none
创建之初是为了实现文字环绕图片的功能，现常用于布局，浮动元素本身BFC化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，无法用来实现自动填满容器的自适应布局。错有错招，由于兼容性良好，比较符合普通人的堆砌认知，接受度比较好。
另，浮动会使行内元素以行内块级呈递，即可以设置宽高。
3、position为absolute或fixed
这两个严重脱标，默认相对于浏览器进行定位布局。当绝对定位存在非static父级时，相对父级定位(子绝父相)，也是布局最常见的用法。
另，这两种定位会使行内元素以行内块级呈递，即可以设置宽高。
4、display为inline-block, table-cell, table-caption, flex, inline-flex
display：inline-block会让元素尺寸包裹收缩，由内容决定尺寸，会使元素以行级元素渲染(可成排显示)，但以块级元素呈递(可以设宽高)。
display：table-cell会让元素像单元格一样，跟随内容宽度显示，但是宽度设定极大也不会超过表格容器的宽度。
5、overflow不为visible
BFC的应用例子
（1）解决浮动塌陷问题
什么是塌陷?
当父元素只包含浮动元素，且父元素未设置高度和宽度的时候，由于子元素脱离了文档流，父元素里没有内容，那么它的高度就会塌缩为零
举个例子：
样式为：
结果如图所示:
由于BFC区域不会与float box重叠，所以可以为其父元素创建BFC，修改parent的内容如下：
结果如下：
（2）同一个BFC下，盒子之间的外边距会重叠的问题
解决办法：将每个盒子都设置为BFC
总结
BFC大概的模式可以归为以上总结的，以后会加以补充更为详细的内容