BFC、IFC

参考w3c visual-model-intro 章节, 9.4 Normal flow

BFC 块级格式上下文

形成BFC的情况

• 浮动的元素
• 绝对定位的元素
• overflow不为visible的元素 （除非该值已经被传播到视口, 比如body元素设置overflow的情况）
• 不是区块盒子的块容器（比如 inline-blocks,table-cells,table-captions）

BFC的布局规则

• 在BFC中，元素从包含块的顶部开始，一个接一个的垂直排布
• 在BFC中，两个兄弟盒之间的垂直距离由margin属性决定
• 在BFC中，相邻的块级元素垂直边距会发生合并
• 在BFC中，每个盒子的左边触碰包含块的左边缘（若从右到左格式，则右侧接触）。即使是浮动元素情况也是如此, 除非盒子建立了一个新的BFC环境

最后一条，有些难理解，看下下面的例子：

默认情况下p标签是触碰包含块的左边缘排列的，当我们设置p为新的BFC时，p标签就不会贴着左边缘排列了

🌰

BFC可以解决的问题

• 布局问题
• 清除浮动
• 防止垂直边距合并（两个相邻BFC垂直边距不会发生合并）

IFC 行内格式上下文

形成IFC的情况

当一个块级内容盒子的内容只有行内元素时就形成了一个行内格式上下文环境

IFC的布局规则

• 在IFC中，元素从包含块的顶部开始，一个接着一个的水平排列(包含这些行内元素和和形成的框组成的长方形区域称为行盒)
• 这些内部元素的横向margins，borders 都会生效
• 这些内部元素可以以不同的方式对齐 （基于底部、顶部或者基线对齐）
• 行盒的宽度由包含块决定，行块的高度由行高度计算部分中给出的规则确定
• 行盒的高度总是足够高足以包含所有的盒子，但它可能高于包含的最高的盒子（不同的定位方式可能导致），当包含盒子的高度小于行盒时盒子的垂直对齐方式由vertical-align确定
• 当多个行内级别的盒子不能水平放置在一个行盒张中时，他们会分布在一个或多个垂直堆叠的行盒中
• 通常，行盒的左边缘接触包含块的左边缘，右边缘接触其包含块的右边缘。但是，浮动元素可能在浮动盒子边缘与行盒边缘之间，因此，虽然同一IFC中的行内盒子通常具有相同的宽度，但是他们的宽度会因浮动元素而减少，在同一IFC种的行盒的高度可能不同（例如一行是图片，一行是文本）
• 当行内盒子的总宽度小于包含他们的行盒的宽度时，他们在行盒中的水平分布由text-align确定，如果该属性的值为justify , 则用户代理可以在行内盒子（除了inline-table 、inline-block的盒子 ）中展开空格和单词。
• 当一个行内盒子的宽度大于行盒时，它会被分成几个盒子，这些盒子分布在多个行盒中，如果行内盒子不能被拆分（单个字符、特殊单词不允许中断、nowrap、pre）行内盒子则会溢出行盒；margins, borders, and padding出现在分割处没有视觉效果
• 由于双向文本处理多个行内元素也可能被分割到同一个行盒
• 在IFC中存在行内级别的内容就会创建行盒，如果行盒里面没有文字、不包含空格、没有margins, padding, or borders 非0的元素，没有其他 in-flow 内容（比如images，inline blocks 和 inline tables），并且不以换行符结束，将视为高度为0的行盒，也被认为是没有意义的

BFC可以解决的问题

• 布局问题

参考

参考w3c visual-model-intro 章节, 9.4 Normal flow