task0001第六部分之BFC,IFC

FC

之前在两列布局的笔记里面写了有关BFC的理解，但是还有很多FC啊，什么IFC，GFC，FFC（后两个CSS3中引入）
那它们共同点就是…都有个FC，FC是什么呢…..
FC呢就是Formatting context，format就是安排…的格局，排版，使…格式化的意思，context呢就是语境，上下文，背景，环境的意思。
那所以它的意思就是安排排版环境…其实刚开始看到格式化上下文……我也只能理解出手机U盘格式化的意思…
安排排版环境我觉得对我个人而言，相对…..通俗一点吧。
那BFC呢就是给块级元素安排个排版环境，IFC呢就是给内联元素安排…..
那可以不可以这样说，把各种BFC啊IFC啊等等的，想象成一个组织，加入它们的组织是有条件的，满足了这个条件就能进入这个组织，也就是说触发了某FC。那每个不同的FC都有着各自的规矩，也就是它们的排版规则。
http://www.w3help.org/zh-cn/kb/010/
关于上面FC这篇讲解得比较专业。

BFC

在我的这http://blog.csdn.net/u014106213/article/details/52659086 我引用了一位前辈的关于BFC的讲解部分，这位前辈写的关于BFC的内容挺不错的，看完大概能清楚BFC了。

IFC

首先是IFC的触发条件：

display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

具体的内容，网上找了一圈，看到的似懂非懂，于是…….
https://www.w3.org/TR/CSS2/visuren.html#inline-foirmatting
于是只能结合翻译..有道啥的，自己再根据理解翻译意思…..
以下…是我结合后的翻译….

IFC的主要规则是下面加粗的一段：

在内联格式设置上下文中：盒子（元素）从一个包含块的顶部开始一个接一个水平放置。盒子之间的——水平方向的外边距margin、border、padding值都遵守默认规律。盒子可以以不同的方式垂直排列：盒子的底部或顶部可以对齐，或在其文本的基线可对准。包含形成一行的框的矩形区域被称为线框，line box。

以下的内容…可以了解了解吧…虽然翻译完也觉得不是很通顺
给这个span元素加了个border……可以看到个红色的框框，不知道和这个line-box是不是重合的。

line box的宽度由包含块和浮动元素的存在所决定。

这个根据包含块应该是指宽度适应里面包含的元素，而浮动元素呢就是说，如果加了浮动之后，元素之间会没有间隙，那么宽度又改变了

line box的高度由line box高度计算中给出的规则确定。

line box高度总是足够包含它所有的盒子。无论如何，它会比它包含的最高的盒子高（如果，例如，盒子是对齐的，那么会导致基准线会向上）。当B盒子的高度小于包含它的线框的高度时，在线框内的B的垂直对齐是由“垂直对齐”属性决定的。比如vertical-align: middle;这个属性

当几个内联级别框在一个line box内水平放置不下时，它们分布在两个或多个垂直堆叠的line box中

这就是说像文字一样折行嘛…….

因此，一个段落是一个垂直堆栈的line box。line box是没有垂直分离的堆叠（除了指定的其他地方），他们从来不会重叠。

在一般情况下，一个line box的左边缘接触其包含块的左边缘，右边缘接触其包含块的右边缘。然而，浮动元素可能会出现在包含块边缘和line box边缘之间的。因此，虽然在相同的内联格式上下文中的line box一般具有相同的宽度（包含块的宽度），但如果可用的水平空间被减少，它们可能会因宽度的变化而有所不同。相同的内联格式上下文中的line box一般在高度上有所不同（例如，一行可能包含一个高的图像，而其他的行则只包含文本）。

当行上的内联级框的总宽度小于包含它们的line box的宽度时，line box内的它们的水平分布是由“text-align”属性决定的。如果该属性具有“justify”的值，用户代理可以在内联框中使空间和单词拉伸（但 inline-table和inline-block boxes不会）。

当内联框超过line box的宽度时，它被拆分成多个框，这些框被分布在多个line box中。如果一个内联盒子不能分割（例如，如果内联盒子包含一个字符，或特定的语言文字规则不允许有间隔，或者被’white-space’的’nowrap’和’pre’影响），那么内联盒子溢line box。

当一个内联框被分割时，在分割的地方margin，border和padding都没有视觉效果。

由于双向的文本处理，内联框也可以在同一行框内被拆分成几个框。

http://www.w3help.org/zh-cn/kb/010/ 这篇文章讲了一些关于分割和对齐的内容。

line box被构造的意义是为了在触发了IFC的地方控制内联元素的排版。它不包含文字，不包含预设空白，不包括设置值为非零的margin，非零的padding，非零的border的内联元素，并不包含其他的处于文档流中的内联元素（如图像、内联块 inline blocks或内联表inline tables），而且结尾的时候不会换行。line box为了确定它任何包含的元素所在的位置需要被认为是零高度的，为了其他某些原因，它需要被认为是虚构的。

以上一大堆…..
http://www.xiaomeiti.com/note/3608中总结得很精炼

BFC和IFC都是CSS2中的概念，在CSS3中还提出了FFC和GFC…上面那个链接都简单介绍了一下这四个FC