IFC原理

Posted 2020-06-30

IFC(inline formatting context),即?内格式化上下?，与之对应的是BFC(block formating context),块格式化上下?，?本
博客锋利的BFC??。它和BFC?样，既不是属性也不是元素，?是?种环境，?种上下?。下?这个链接是w3c关于IFC的描
述：http://www.w3.org/TR/CSS2/visuren.html#inline-formatting。
在IFC中，框（boxes）?个接?个地?平排列，起点是包含块的顶部。?平?向上的margin，border和padding在框之间得到
保留。框在垂直?向上可以以不同的?式对?：它们的顶部或底部对?，或根据其中?字的基线对?。包含那些框的??形区域，
会形成??，叫做?框(line box)。
?个?框的宽度由包含它的元素的宽度和包含它的元素??有没有float元素来决定，?度的确定由??度计算规则决定。
?框的?度?以包含他的内部容器，也可能?它包含的容器们都?（?如在基线对?的时候），当他包含的内部容器的?度?于?
框的?度时，内部容器的垂直位置由??的vertical（默认值是baseline）这个属性来确定。（这个性质可以?来实现垂直居中）
代码：
<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>
如果?个?内框在?平?向?法放??个?框内，它们可以分配在两个或多个垂直堆叠的?框中。因此，?个段落就是?框在垂直
?向上的堆叠。?框在堆叠时没有垂直?向上的分割且永不重叠。
代码：
<p style="background:silver;width:50px;">
<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>
通常，?框的左边接触到包含块的左边，右边接触到其包含块的右边。然?，浮动元素可能会处于包含块边缘和?框边缘之间。总
之，尽管在相同的?内格式化上下?中的?框通常拥有相同的宽度（包含块的宽度），它们可能会因浮动元素缩短了可?宽度，?
在宽度上发?变化。同??内格式化上下?中?框通常?度不?样（如，??包含了?个?的图形，?其它?只包含?本）。
代码：
<p style="background:silver;width:400px;overflow:hidden;">
<span style="float:left;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>
当??中?内宽度的总和?于包含它们的?框的宽，它们在?平?向上的对?，取决于"text-align"特性。如果其值是”justify“，
?户端也可以拉伸?内框（除了”inline-table“和”inline-block“框）中的空间和?字。
代码：
<p style="background:silver;width:400px;overflow:hidden;text-align:center;">
<span style="float:left;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>
如果?个?内框超出包含它的?框的宽度，它会被分割成?个框，并且这些框会被分布到?个?框内。如果?个?框不能被分割
（例如：?内框只包含单个字符，或者语?特殊的断字规则不允许在?内框?换?，或者?内框受到带有“nowrap“或”pre“值
的”white-space“特性的影响），这时，?内框会益处?框。
代码：
<p style="background:silver;width:40px;">
<span style="font-size:50px;border:1px solid yellow;">好</span><em style="border:1px solid
yellow;">你好?家好</em>
</p>
如果?个?内框被分割，margin，padding和border在所有分割处没有视觉效果。
<p style="background:silver;width:50px;">
<span style="font-size:50px;border:1px solid yellow;">你好</span><em
style="background:green;margin:1em;border:1px solid yellow;">我们好</em><span style="verticalalign: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。
下?是?个IFC?于处理图?垂直居中的例?：
.ifc:after,.ifc-after{
display:inline-block;
*display:inline;
*zoom:1;
content:‘‘;
height:100%;
width:0;
font-size:0;
vertical-align:middle;
}
#test{
height:200px;
width:300px;
background:silver;
border:3px solid black;
}
DOM结构：
<div id="test"class="ifc">
<img style="vertical-align:middle;"src="http://static.cnblogs.com/images/adminlogo.gif" />
<span>我要垂直居中</span>
<!--[if lte IE 7]><span class="ifc-after"></span><![endif]-->
</div>
效果图：
思路：创建?个IFC的环境，让?框的?度是包含块的?度的100%，让?框内部的元素使?vertical-align：middle，就可以实
现垂直居中。因此，我们可以在?框中插??个?度100%的inline-block元素，把整个?框撑?直到包含块的100%。