一、BFC

什么是BFC？BFC的全称是Block Formatting Context，直译过来是：块级格式化上下文。

BFC的布局规矩：

1、内部box在垂直方向，一个接一个的放置;
2、box的垂直方向由margin决定，属于同一个BFC的两个box间的margin会重叠
3、BFC区域不会与float box重叠（可用于排版）；
4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
5、计算BFC的高度时，浮动元素也参与计算

哪些元素或属性会触发BFC呢？

1、根元素；
2、float属性不为none；
3、position为absolute或fixed；
4、display为inline-block, flex, 或者inline-flex；
5、overflow不为visible；

二、IFC

同理，IFC是Inline formatting context。

在一个IFC中，从父级元素的顶部开始，盒子一个接一个横向排列。此时，横向的margin、borders、padding在这些盒子中都是有效的。这些盒子有可能通过不同的方式垂直对齐：1、他们底部或者顶部可以对齐，2、或者可以他们内部的文字基线可以对齐。如果一个矩形区域，包含着一些排成一条线的盒子，称为line box。

一个line box的宽度，由他的包含块(containg block)和floats的存在情况决定。linebox的高度，由你给出的代码决定。一般line box的高度对于子元素而言总是够用的，不过有可能比他包含的最高的元素还高（如果这样，内部包含的盒子会对齐，基线排成一排）。当盒子的高度小于父级盒子高度时，垂直方向的对齐由‘vertical-align’属性决定。当几个内联盒子在line box一行内放不下时，它们会分布在两个以上的垂直并列的line box上。

一般来说，line box和内部元素，都是左挨左，右挨右。不过浮动盒子可能会在包含块和line box的边缘之间。因此，即使line box在同一个IFC里通常有相同的宽度。如果他们横向间距会因float减少，它们宽度可能会不一样。line box在同一个IFC高度可能不一样。