BFC与IFC
BFC与IFC的参与者
普通流
中的盒子会参与一种格式上下文,这个盒子可能是块盒也可能是行内盒,但不可能同时是块盒又是行内盒。块级盒参与块级格式上下文(
BFC
),行内级盒参与行级格式上下文(
IFC
)。
BFC Block formatting contexts(BFC)
BFC的形成
浮动,绝对定位元素,和display属性为inline-boxs、table-cells、table-captions的不是块盒的块容器(除非这个值已经被传播到视口),以及当overflow不为visible的块盒才会为它的内容创建新的BFC。
为了看得更清晰,梳理如下
-
float 的值不为 none
-
position 的值不为 static 或 relative
-
display 的值为 table-cell、table-caption、inline-block、flex 或 inline-flex
-
overflow 的值不为 visibility
BFC的特性
IFC
在IFC中，盒子水平放置，一个接着一个，从包含块的顶部开始。水平margins,borders,和padding在这些盒子中被平分。这些盒子也许通过不同的方式进行对齐:他们的底部和顶部也许被对齐，或者通过文字的基线进行对齐。矩形区域包含着来自一行的盒子叫做line box。
line box的宽度由浮动情况和它的包含块决定。line box的高度由line-height的计算结果决定。
一个line box总是足够高对于包含在它内的所有盒子。然后，它也许比包含在它内最高的盒子高。(比如，盒子对齐导致基线提高了)。当盒子B的高度比包含它的line box的高度低，在line box内的B的垂值对齐线通过'vertical-align'属性决定。当几个行内级盒子在一个单独的line box内不能很好的水平放置，则他们被分配成了2个或者更多的垂直重叠的line boxs.因此,一个段落是很多个line boxs的垂直叠加。Line boxs被叠加没有垂直方向上的分离(特殊情况除外)，并且他们也不重叠。
通常，line box的左边缘挨着它的包含块的左边缘，右边缘挨着它的包含块的右边缘。然而，浮动盒子也许会在包含块边缘和line box边缘之间。因此，尽管line boxs在同样的行内格式上下文中通常都有相同的宽度(就是他的包含块的宽度)，但是水平方向上的空间因为浮动被减少了，它的宽度也会变得复杂。Line boxs在同样的行内格式上下文中通常在高度上是多样的(比如，一行也许包含了一个最高的图片然后其他的也可以仅仅只包含文字)
当在一行中行内级盒子的总宽度比包含他们的line box的宽度小，他们的在line box中的水平放置位置由'text-align'属性决定。如果属性是'justify'，用户代理可能会拉伸空间和文字在inline boxs内。
当一个行内盒子超过了line box的宽度，则它被分割成几个盒子并且这些盒子被分配成几个横穿过的line boxs。如果一个行内盒子不能被分割。则行内盒子溢出line box。
当一个行内盒子被分割，分割发生则margins,borders,和padding便没有了视觉效果。
在同样的line box内的行内盒子也许会被分割成几个盒子因为双向的文字。
Line boxs在行内格式上下文中档需要包含行内级内容时被创造。Line boxs包含没有文字，没有空格，没有带着margins,padding和borders，以及没有其他在流中的内容(比如图片，行内盒子和行内表格)，也不会以新起一行结尾。对于在他们内的任何盒子的位置都以他们决定并且必须将他们视作没有高度的line boxs。
例子1
这里是一个inline box结构的例子。下面的段落包含着散布在EM和STRONG元素的匿名文字。
<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>P元素生成了一个块级盒子，它包含五个inline boxs，其中有3个是匿名的。如下。
-
匿名 : 'Several'
-
EM : 'emphasized words'
-
匿名 : 'appear'
-
STRONG : 'in this'
-
匿名 : 'sentence, dear'
Several emphasized words appear in this sentence, dear.
如果没有，inline boxes将被分离并被分别分配到不同的line boxs中。上面的段落可能会被分割成下面这样:
Several emphasized words appear
in this sentence, dear.
或者，这样：
Several emphasized
words appear in this
sentence, dear.
在前面的例子中，EM box是被分割成了2个EM boxs(叫他们'split1'和'split2')。外边距，边界，内边距和文字修饰效果作用在'split1'之后或者'split2'之前都没有任何效果。
例子2
考虑下面的例子。
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Example of inline flow on several lines</TITLE>
<STYLE type="text/css">
EM {
padding: 2px;
margin: 1em;
border-width: medium;
border-style: dashed;
line-height: 2.4em;
}
</STYLE>
</HEAD>
<BODY>
<P>Several <EM>emphasized words</EM> appear here.</P>
</BODY>
</HTML>
-
外边距作用在了'emphasized'之前和'words'单词之后
-
内边距作用在了'emphasized'的前面，上面，和下面，和'words'单词的后面，上面和下面。单独的虚线框分别被渲染在了每个事例的三个边上。
81
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
