CSS中包含块，层叠上下文，BFC,IFC究竟是什么？

1.什么是包含块？

如果有两个div，一个是父元素，一个是子元素。父元素会决定子元素的大小和定位。简单来说，就是可以决定一个元素大小和定位的元素。一个元素的css盒子为它的内部元素创建了包含块 。通常情况下，一个元素的包含块是由离它最近的块级祖先元素的内容边界决定的。但是当元素被设置为绝对定时，此时该元素的包含块是由离它最近的position：relative或者position：absolute的祖先元素决定的。

2.层叠上下文？

层叠上下文是HTML中的一个三维的概念，实际上网页除了x轴，y轴，它还有z轴。z轴往往都是用来设定层的先后顺序的。一个元素在z轴方向上的堆叠顺序，是由层叠上下文和层叠级别这两个因素决定的。

3.BFC和IFC

在CSS中，页面上任何一个元素都可以看成是一个盒子。在普通的文档流中，盒子会参与一种格式上下文，这个盒子可能是块盒子，也可能是行内盒子。一个盒子只能是块盒子或者行内盒子，不能同时兼顾。其中块盒子参与BFC（块级格式上下文），行内盒子参与IFC（行级格式上下文）。元素的类型和display属性决定了盒子的类型。不同的盒子会参与不同的格式上下文。

BFC：它是一个独立的渲染区域，只有块盒子参与。如何创建呢？浮动元素，绝对定位元素，元素属性为inline-block，table-cption，table-cell以及overflow属性不为visible的元素将会创建一个新的块级格式上下文。

BFC的特点：一是，在一个BFC中，盒子从顶端开始垂直一个接着一个地排列。两个相邻盒子之间的垂直间距由margin属性决定。在同一个BFC中，两个相邻的盒子之间垂直方向上外边距会叠加。二是，在图个BFC中，每一个盒子的左外边界会紧贴这容器的左边，即使存在浮动元素也是如此。

BFC的用处：避免垂直外边距叠加，清除浮动，实现自适应布局。

举个例子：比如浮动元素会使得父元素高度塌陷，如果我们给父元素增加属性：overflow：hidden就可以。这就是因为属性overflow：hidden使得父元素变成了一个BFC，由于BFC在计算他的自身高度的时候，会把浮动子元素高度算进去。此时就相当于清除浮动。

如图：没有加之前是这样的

加了之后是这样的：

BFC其实用处还有很多，比如上面说的去除外边距叠加，浮动元素旁边的文本环绕等问题，都可以解决。大家可以在实际的项目或者大型优秀网站的源码上多多留意和学习，那么大家的CSS一定会有大的提升。

IFC的内容，主要是使得元素的水平方向的margin和padding有效果。这个在项目中涉及的不是很多。大家可以查询一下网上的其他资源。