BFC(块级格式化上下文)和IFC (内联格式化上下文)简述

1.BFC

BFC(Block Formatting Contexts)直译为"块级格式化上下文" 。就是形成了一个隔离的渲染区域, BFC容器内的子元素不会在布局上影响到盒子外的元素。

如何产生BFC?

• float的值不为none
• overflow的值不为visible
• position的值不为relative和static
• display的值为table-cell,table-caption,inline-block中的任何一个

用途：BFC可以帮助我们解决外边剧重叠问题

2.IFC

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"。

FC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)。

如果产生IFC?

• display: inline-block;

用途：

• 水平居中：当一个块要在环境中水平居中，设置为inline-block则会在外层产生IFC，通过text-align:center,可以使其水平居中。
• 垂直居中：创建一个IFC,用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以此父元素垂直居中。