在诠释BFC以前，先说一下文档流。咱们常说的文档流本来分为定位流、浮动流、平常流三种。而平常流本来即是指BFC中的FC。FC(FormattingContext)，直译过来是格式化高低文，它是页面中的一伙衬着地域，有一套衬着规定，决意了其子元素怎样布局，以及和其余元素之间的关连和影响。罕见的FC有BFC、IFC，尚有GFC和FFC。
BFC(BlockFormattingContext)块级格式化高低文，是用于布局块级盒子的一伙衬着地域。MDN上的诠释：BFC是Web页面CSS视觉衬着的一部份，用于决意块盒子的布局及浮动互相影响范畴的一个地域。
注视：一个BFC的范畴包罗创造该高低文元素的整个子元素，但不包罗创造了新BFC的子元素的内部元素。这从另一方角度解说，一个元素不能同时存在于两个BFC中。由于倘使一个元素也许同时处于两个BFC中，那末就象征着这个元素能与两个BFC中的元素产生影响，就违背了BFC的断绝影响。
2.三种文档流的定位计划向例流(Normalflow)
在向例流中，盒一个接着一个摆列;
在块级格式化高低文内里，它们竖着摆列；
熟稔内格式化高低文内里，它们横着摆列;
当position为static或relative，而且float为none时会触发向例流；
关于静态定位(staticpositioning)，position:static，盒的场所是向例流布局里的场所；
关于相对定位(relativepositioning)，position:relative，盒偏移场所由top、bottom、left、right属性界说。虽然有偏移，依然保存原有的场所，别的向例流不能占用这个场所。
浮动(Floats)
左浮动元素尽可能靠左、靠上，右浮动同理
这致使向例流盘绕在它的周边，除非配置clear属性
浮动元素不会影响块级元素的布局
但浮动元素会影响行内元素的布局，让其环抱在本身四周，撑大父级元素，进而直接影响块级元素布局
最高点不会高出目下行的最高点、它前方的浮动元素的最高点
不高出它的包罗块，除非元素本身曾经比包罗块更宽
行内元素涌此刻左浮动元素的右侧和右浮动元素的左侧，左浮动元素的左侧和右浮动元素的右侧是不会摆放浮动元素的
绝对定位(Absolutepositioning)
绝对定位计划，盒从向例流中被移除，不影响向例流的布局；
它的定位相干于它的包罗块，相干CSS属性：top、bottom、left、right；
倘使元素的属性position为absolute或fixed，它是绝对定位元素；
关于position:absolute，元素定位将相干于上司元素中近来的一个relative、fixed、absolute，倘使没有则相干于body；
3.BFC触发方法根元素，即HTML标签
浮动元素：float值为left、right
overflow值不为visible，为auto、scroll、hidden
display值为inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
定位元素：position值为absolute、fixed
注视display:table也也许生成BFC的出处在于Table会默许生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。
4.管理规定涉猎器对BFC地域的管理规定：
生成BFC元素的子元素会一个接一个的安插。
笔直方位上他们的开始是一个包罗块的顶部，两个相邻子元素之间的笔直间隔取决于元素的margin性格。在BFC中相邻的块级元素的外边距会折叠(Masteringmargincollapsing)。
生成BFC元素的子元素中，每一个子元素左外边距与包罗块的左界线相联触（关于从右到左的格式化，右外边距来往右界线），虽然浮动元素也是这样（虽然子元素的实质地域会由于浮动而收缩），除非这个子元素也创造了一个新的BFC（如它本身也是一个浮动元素）。
规定解读：
内部的Box会在笔直方位上一个接一个的安插
内部的Box笔直方位上的间隔由margin决意。（完备的说法是：属于统一个BFC的两个相邻Box的margin会产生折叠，不同BFC不会产生折叠。）
每个元素的左外边距与包罗块的左界线相联触（从左向右），虽然浮动元素也是这样。（这解说BFC中子元素不会高出他的包罗块，而position为absolute的元素也许高出他的包罗块界线）
BFC的地域不会与float的元素地域堆叠
计划BFC的高度时，浮动子元素也介入计划
5.影响BFC是页面上的一个断绝的自力容器，容器内里的子元素不会影响到表面元素，反之亦然。咱们也许欺诈BFC的这个性格来做良多事。
5.1制止元素被浮动元素笼罩一个一般文档流的block元素或者被一个float元素笼罩，挤占一般文档流，是以也许配置一个元素的float、display、position值等方法触发BFC，以制止被浮动盒子笼罩。
行使BFC制止元素被浮动元素笼罩
5.2也许包罗浮动元素经过变动包罗浮动子元素的父盒子的属性值，触发BFC，以此来包罗子元素的浮动盒子。
行使BFC包罗浮动元素
注视，这边触发BFC并不能制止别的形状的摆脱文档流的元素笼罩一般流元素。
BFC内部其余形状摆脱文档流(absolutefixed)
5.3制止由于涉猎器由于四舍五入形成的多列布局换行的情状偶尔候由于多列布局采取少量点位的width致使由于涉猎器由于四舍五入形成的换行的情状，也许在末了一列触发BFC的形状来制止换行的产生。例以底下栗子的特别情状
行使BFC制止多列布局末了一列换行
5.4制止相邻元素的margin归并属于统一个BFC的两个相邻块级子元素的高低margin会产生堆叠，(配置writing-mode:tb-rl时，水准margin会产生堆叠)。于是当两个相邻块级子元素分属于不同的BFC时也许制止margin堆叠。这边给任一个相邻块级盒子的表面包一个div，经过变动此div的属性使两个原盒子分属于两个不同的BFC，以此来制止margin堆叠。
行使BFC制止margin归并
网上的帖子大多深浅不一，以至有些先后抵牾，鄙人的文章都是研习经过中的归纳，倘使发觉差错，接待留言指出~
参考：
我对BFC的领会
深入领会BFC和MarginCollapse
深入领会BFC
UnderstandingBlockFormattingContextsinCSS
研习BFC
UnderstandingBlockFormattingContextsinCSS
带你完全把握CSS浮动
这边是w3cschool编程狮，想研习编程的好友们