BFC和IFC分别是什么？BFC有什么作用？

1、简要概括

1. Block level的box会参与形成BFC：例如display值为block/ list-item/ table
2. Inline level的box会参与形成IFC：比如 display值为inline/ inline-table/ inline-block

2、FC(Formatting Context)

格式化上下文。定义的是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

3、布局规则

1. IFC布局规则：在行内格式化上下文中，boxes一个接一个地水平排列，起点是包含块的顶部。
   • 水平方向上的margin border padding在框之间得到保留
   • 在垂直方向上可以以不同的方式对齐：顶部或底部对齐，或者根据文字的基线对齐
2. BFC布局规则：
   • 内部的Box会在垂直方向，一个接一个地放置
   • Box垂直方向上的距离由margin决定，同属一个BFC的两个相邻Box的margin会发生重叠
   • 每个元素的左外边缘(margin-left)，与包含块的左边(contain box left)相接触(对于从左到右的格式化)。即使存在浮动也是如此，除非这个元素自己形成一个新的BFC
   • BFC的区域不会与float box重叠
   • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
   • 计算BFC的高度时，浮动元素也参与计算

4、如何形成一个BFC

1. 根元素或者其它包含它的元素
2. 浮动元素(float不是none)
3. 绝对定位的元素（position为absolute或fixed）
4. 非块级元素具有display:inline-block， table-cell，table-caption，flex，inline-flex
5. 块级元素具有overflow，且值不是visible

5、BFC的用处

1. 清除浮动：当父盒子div未设置高度，子盒子都设置浮动，则父元素会出现高度塌陷的情况。解决方案：给父元素添加overflow:hidden，使其形成BFC，计算高度时会计算float元素的高度，达到清除浮动影响的效果。
2. 布局：自适应两栏布局。
   
   
   解决方案：给main设置overflow:hidden，使其形成BFC，因为BFC区域是独立的，不会与页面其他元素互相影响，且不会与float元素重叠，因此可以形成两列自适应布局
   
3. 防止垂直margin合并
   
   解决方案：为其中一个元素外面包裹一层元素，且为其设置overflow:hidden，使其形成BFC。因为BFC内部是一个独立的容器，所以不会与外部相互影响，可以防止margin合并。