IFC IFC(inline formatting context),即⾏内格式化上下⽂，与之对应的是BFC(block formating context),块格式化上下⽂
在IFC中，框（boxes）⼀个接⼀个地⽔平排列，起点是包含块的顶部。⽔平⽅向上的margin，border和padding在框之间得到保留。框在垂直⽅向上可以以不同的⽅式对⻬：它们的顶部或底部对⻬，或根据其中⽂字的基线对⻬。包含那些框的⻓⽅形区域， 会形成⼀⾏，叫做⾏框(line box)。 ⼀个⾏框的宽度由包含它的元素的宽度和包含它的元素⾥⾯有没有float元素来决定，⾼度的确定由⾏⾼度计算规则决定。 ⾏框的⾼度⾜以包含他的内部容器，也可能⽐它包含的容器们都⾼（⽐如在基线对⻬的时候），当他包含的内部容器的⾼度⼩于⾏ 框的⾼度时，内部容器的垂直位置由⾃⼰的vertical（默认值是 baseline）这个属性来确定。（这个性质可以⽤来实现垂直居中） eg：<p style="background:silver;width:400px;"> <span style="font-size:50px;border:1px solid yellow;">你好</span><em style="border:1px solid yellow;">我好</em><span style="vertical-align:top;border:1px solid yellow;">⼤家好</span> </p>
⾏内框还可能由于双向⽂本处理（bidirectional text processing）⽽在同⼀个⾏框内被分割为好⼏个框。 不包含⽂本、保留空⽩符、margin/padding/border⾮0的⾏内元素，以及其他常规流中的内容（⽐如，图⽚，inline-blocks和 inline-tables），并且不是以换⾏结束的⾏框，必须被当作0⾼度⾏框对待。就外边距折叠⽽⾔，这种⾏框必须被忽略。 补充：在IFC的环境中，是不能存在block-level元素的，如果将block-level元素插⼊到IFC中，那么此IFC将会被破坏掉，⽽ block-level元素前的元素和block-level元素后的元素将会各⾃⾃动产⽣⼀个匿名容器其包围，这个匿名的容器内部环境将是⼀个 新的IFC。
BFC BFC(Block formatting context)直译为"块级格式化上下⽂"。它是⼀个独⽴的渲染区域，只有Block-level box参 与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 布局 内部的Box会在垂直⽅向，⼀个接⼀个地放置。 Box垂直⽅向的距离由margin决定。属于同⼀个BFC的两个相邻Box的margin会发⽣重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。 即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。反之也如此。 计算BFC的⾼度时，浮动元素也参与计算 哪些元素会生成BFC 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格 式化，否则相反)。即使存在浮动也是如此。 BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。反之也 如此
来源：https://www.cnblogs.com/tangqi/p/5327100.html