笔记 前端需要了解的BFC

什么是BFC?

BFC指的是Block Formatting Context，它提供了一个环境， html元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局，决定了元素如何对其内容进行定位，以及和其他元素的关系和相互作用。

其中：FC(Formatting Context)指的是页面中的一个渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。

块级格式化上下文，指的是一个独立的块级渲染区域， 只有block-level box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC的生成

1. float的值不为none；
2. overflow的值不为visible；
3. display的值为 inline-block, table-cell, table-caption；
4. position的值为absolute或fixed；

BFC的约束规则

生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。

生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

内部的Box会在垂直方向上一个接一个的放置。

垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）

每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）。

BFC的区域不会与float的元素区域重叠。

计算BFC的高度时，浮动子元素也参与计算。

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

BFC在布局中的应用

不和浮动元素重叠：如果一个浮动元素后面跟着一个非浮动元素, 就会产生覆盖。

防止margin重叠：同一个BFC中的两个相邻Box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE中是个例外，IE可以设置write-mode。