CSS2.1规范笔记——9.4 常规流

常规流

常规流中的盒属于一个FC，可能是BFC或是IFC中的一个。块级盒参与BFC，行内级盒参与IFC。

BFC

BFC的产生条件：

• float：left | right
• position：absolute | fixed
• display：inline-block | table-cell | table-caption（以及匿名的表格元素）
• overflow: hidden | auto | scroll

BFC的布局规则：

• 在BFC中，盒从包含块的顶部开始在垂直方向一个接一个地放置；
• 两个兄弟盒之间的垂直距离由margin属性决定；
• 同一个BFC中的相邻块级盒之间的垂直外边距会合并。

在一个块格式化上下文中，每个盒的左外边界（margin edege）挨着包含块的左外边界（对于从右向左的格式化，右外边界挨着）。即使存在浮动（这是相对于IFC来说的，因为IFC中如果存在浮动，则行框的宽度会小一些，BFC显然就不会），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动而变窄）。

IFC

IFC布局规则：

• 在IFC中，盒是从包含块的顶部开始在水平方向一个接一个地放置；
• 这些盒的水平margin、border、pading都有效；
• 盒可能会以不同的方式垂直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐。

包含来自同一行的盒的矩形区域叫行框（inline box，或叫行盒）。

行框的高度：由line-height和vertical-align属性决定。行框总是足够高的，能够容纳它包含的所有盒。然而，它可能比所包含的最高的盒还要高（例如，如果盒是以基线对齐的）。当盒B的高度小于它所在的行框的高度时，行中B的垂直对齐方式由vertical-align属性决定。当几个行内级盒在水平方向上不能共存于一个行框时，它们会被分到两个或多个垂直堆叠的（vertically-stacked） 行框里。因此，段落就是个行框的垂直栈（vertical stack）。行框没有垂直间隔地堆放（除非在其它地方有特别说明）并且它们不会重叠。同一个IFC中的行框一般高度各不相同（例如，一行可能含有一个搞图片，其他的只含有文本）。

行框的宽度：行框的宽度由包含块和浮动情况决定。一般来说，一个行框的左边界挨着其包含块的左边界，右边界挨着其包含块的右边界，也就是行框的宽度等于包含块的宽度。然而，浮动盒可能会跑到包含块边界与行框边界之间。因此，尽管同一个行内格式化上下文中的行框一般都有相同的宽度（即包含块的宽度），如果可用的水平空间因为浮动而减少了的话，它们的宽度就可能不同。当一行的行内级盒的总宽度小于它们所在的行框的宽度时，它们在行框里的水平分布由text-align属性决定。如果该属性值为justify，用户代理可能还会拉伸行内盒（不包括inline-table和inline-block）里的空格和单词。当行内盒超出行框宽度时，它会被分成几个盒，并且这些盒会跨多行框分布。如果一个行内块无法分割（例如该行内盒只含单一字符，或者特定语言的单词分割规则不允许在该行内盒里分隔，或该行内盒受到了一个值为nowrap或者pre的white-space的影响），那么该行内盒会从行框溢出。当一个行内盒被分割后，外边距，边框和内边距在发生分割的地方（或者在任何分割处，如果有多处的话）没有视觉效果。

同一个行框里的行内盒也可能因为双向文本处理而被分割成几个盒。

需要盛放IFC中的行内级内容时，创建一个行框。该行框不包含文本、保留空白符、外边距、内边距和边框非0的行内元素，以及其他流内内容（例如，图片，行内块或行内表格），并且不以保留换行符结束的（行框）在确定其内部元素的位置时必须被当做0高度行框，处于其他目的时，必须当它不存在。

相对定位

当一个盒根据常规流或者浮动摆放好后，他可能会相对于该位置移动，称之为相对定位。这种法师偏移盒B1的位置不会影响盒B2。

对于相对定位的元素，left和riht水平移动盒，不会改变其大小。因为盒没有被分割或拉伸，所以left的应用值总是满足：left=-right。

top、bottom和left、right基本类似，但有一点不同：如果都不是auto，则忽略bottom（因为常规流总是自上而下嘛）。