前端布局中的几个常见概念（FC、BFC）

写前端的同学都知道CSS盒模型概念，进行CSS布局时，我们常常需要确定一个元素时block类型的块元素还是inline类型的内联元素。FC、BFC、IFC这些概念就和这些元素类型相关。

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

BFC：Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC产生的条件：

1.html根元素

2.float的值不为none

3.display的值为inline-block、table-cell、table-caption

4.position的值为absolute或fix

BFC约束规则：

1.生成BFC元素的子元素会一个接着一个防止。垂直方向上他们的起点事一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠，同属一个BFC的两个相邻Box的margin会发生重叠。

2.生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界接触，即使浮动元素也是如此（除非这个子元素自身也是一个浮动元素）。

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

4.计算BFC高度时，浮动元素也参与计算。

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

我们在写css常见的一些问题都可以由上面两条推出，例如：

1.Block元素与父元素同宽，所以Block元素竖直方向上垂直排列。

2.竖直方向上有的Block元素margin会重叠，水平方向不会。

3.浮动元素会尽量接近左上方或右上方。

4.为父元素设置overflow:hidden或浮动父元素，则父元素会包含其浮动的子元素。

BFC有很多实际的用处，例如防止相邻block的竖直margin重叠（塌陷），这个以后在总结一篇关于margin的来说。