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就是??上的?个隔离的独?容器，容器??的?元素不会影响到外?的元素。反之也 如此
原文：http://www.cnblogs.com/tangqi/p/5327100.html