简述BFC及其如何工作

大家好，我是IT修真院上海分院第01期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网 CSS任务中可能会使用到的知识点：

BFC及其如何工作

一、背景介绍

首先我们知道CSS的基本单位是Box（盒子），一个html页面就是很多Box组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

block-level box:display 属性为 block, list-item, table 的元素，常见的块级盒子有div、p、ul、h1-h6...；

inline-level box:display 属性为 inline, inline-block, inline-table 的元素，常见的行内元素有a、span、img、imput...；

Formatting context：

Formatting context 是 W3C CSS2.1 规范中的一个概念。翻译为执行化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素 将如何定位，以及和其他元素的关系和相互作用。

处于页面文档流中的盒子必定位于某一格式化上下文中，最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC定义：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何 布局，并且与这个区域外部毫不相干。

二、知识刨析

BFC布局规则

1、内部的Box会在垂直方向，一个接一个地放置。

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

3、每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

5、计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算。

6、浮动的BOX区域不叠加到BFC上。

哪些元素会生成BFC?

1、根元素

2、float属性不为none

3、position为absolute或fixed

4、display为inline-block, table-cell, table-caption, flex, inline-flex

5、overflow不为visible

三、常见问题

MAGIN重叠问题？

创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠

浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）

绝对定位元素不与任何元素的外边距产生折叠

inline-block元素不与任何元素的外边距产生折叠

一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。

一个 'height' 为 'auto' 并且 'min-height' 为 '0'的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。

一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 'height' 为 0 或 'auto'， 'min-height' 为 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。

四、扩展思考

run-in box

FFC自适应格式化上下文、GFC网格布局格式化上下文

五、参考文献

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

六、ppt/视频链接

视频：https://pan.baidu.com/s/1o8fw2AQ 密码：jz2h

PPT：https://ptteng.github.io/PPT/PPT/css-15-BFC.YT.html#/

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！

鸣谢！

感谢大家的阅读！