BFC和IFC问题梳理

今天遇到几个问题，记录以下，如下：

什么是BFC和IFC？
它们的区别？它们都有什么作用？
怎么形成BFC和IFC？overflow除了hidden还有哪个值可以触发BFC？position除了absolute还有哪个值可以触发？
BFC会与float元素相互覆盖吗？为什么？举例说明。

BFC及格式化上下文
IFC及行内格式化上下文。
相对应的还有FFC(弹性格式化上)，GFC（网格布局格式化上下文）。

什么是BFC
上面已经提到了BFC及块级格式化上下文，是块盒子容器在布局过程中的渲染区域。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，容器外的元素同样不会影响到里面的元素。
BFC是规则内部块级元素格式（摆放规则）的一个独立的环境，对于BFC内的所有的块级元素，有以下的约束规则
1.一个块级元素占据一整行空间，一个接一个从上到下排列。
2.两个同级盒之间的垂直距离由margin属性决定。相邻块级盒之间的垂直margin会出现折叠。BFC里的盒子左侧边缘不会超过BFC，除非这个盒子自己也变成了一个新的BFC。
3.每个盒子的左外边缘包含块左边缘(对于从右到左的格式，右边缘)，除非盒子建立了新的块级格式化上下文
4、计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
5、float的元素区域不会覆盖其他BFC的区域。

如何创建一个BFC
1.根元素(html)
2.float浮动，值不为none时
3.绝对定位元素，absolute或fixed
4.行内块元素，display：inline-block
5.overflow值不为visible的元素

什么是IFC
行内格式化上下文中，IFC由只包含行内级盒子的块容器建立，IFC由只包含行内级盒子（框）的块容器建立，起点是包含快的顶部。水平方向上的margin，border和padding在框之间得到保留，框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。其排列顺序根据书写的设置来决定。对于水平书写模式，各个盒子从左边开始水平地排列对于垂直书写模式，各个盒子从顶部开始垂直地排列

怎么形成一个IFC
1.块级元素中仅包含内联级别元素
需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。
IFC特性
1.IFC的元素会在一行中从左至右排列，并且垂直方向起点为元素顶部。
2.在一行上的所有元素会在该区域形成一个行框
3.行宽的高度为包含框的高度，高度为行框中最高元素的高度iv)浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
4.行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框vi)行框的元素内遵循text-align和vertical-align
5.子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。

BFC会与float元素相互覆盖吗
BFC区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素