网上有许多关于BFC的文章，看得我眼花缭乱，似懂非懂，所以自己写一篇BFC的文章，加深自己的记忆力，也希望能帮到大家。
首先我们要了解什么是BFC，BFC全称是Box Formatting Content，即块级格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定义的一个概念。在讲BFC之前，我们还要了解什么是Box、Formatting Content，以及视觉格式化模型。在我的上一篇文章中详细讲了视觉格式化模型和Box，所以现在不多说。
一、Box：CSS的布局的基本单位
Box是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box，会参与不同的Formatting Content（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。盒子的类型有：
block-level box：display属性为block，list-item，table的元素，会生成block-level box。并且参与block formatting 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 formatting context（简称BFC）和Inline formatting context（简称IFC）。
CSS2.1中只有BFC和IFC，CSS3中还增加了GFC和FFC。
三、BFC的生成
BFC（Block formatting context），块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
1、什么样的元素能生成BFC？
CSS2.1中规定，满足下列CSS声明之一的，便可以生成BFC：
设置除float：none以外的属性值（如：left/right）
设置除overflow：visible以外的属性值（如：hidden/auto/scroll）
设置display属性值为：inline-block/flex/inline-flex/table-cell/table-caption
设置position属性：absolute/fixed
设置fieldset元素（可以给表单元素设置环绕边框的html元素）
2、生成BFC后会怎么样？
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
计算BFC的高度时，浮动元素也参与计算
3、BFC的作用是什么?
防止margin重叠
同一个BFC中俩个相邻的box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE这中是个特例，IE可以设置write-mode。
要阻止margin重叠，只要将俩个元素别放在一个BFC中即可（可以用上文提到的方式让相邻元素其中一个生成BFC）。阻止俩个相邻元素的重叠看起来没有意义，主要用于嵌套元素。
清除浮动
使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与高度计算，即不会产生高度塌陷的问题。
多栏布局
每个元素的margin box的左边，与包含块border box的左边相接触