CSS布局之BFC和IFC

本文为原创，转载请注明出处： cnzt       文章：cnzt-p

http://www.cnblogs.com/zt-blog/p/6708358.html

《这是一篇css2-3的布局规则0.000001览》

BFC -- block formatting context 块级格式上下文

块级元素（block-level elements）--  display:block/list-item/table/flex
块级盒（block-level boxes）--  块级盒是指参与了BFC的盒子，块级元素都会生成包含后代元素和生成内容的自身原本的盒子，并且这个盒子会参与任何位置计算(利用父元素的BFC清除浮动的原理，另外还有clearfix的清除法)！

　　1. content box(content/inner edge * 4)
　　    conent的四条边构成了content box
　　2. padding box(padding edge * 4)
　　    padding的四条边构成了padding box
　　3. border box(border edge * 4)
　　    border的四条边构成了border box
　　4. margin box(margin * 4)
　　    margin的四条边构成了margin box。(外边距的上下合并解决方法，给父元素添加border,or为父元素设置BFC特性)

包含块（containing block）--  最近的块级祖先元素的content box

块级排版上下文 BFC  -- 
　　1. BFC布局是从包含块的顶部开始垂直向下，外边距会合并(仅指处于同一BFC的相邻块级盒)，由普通文档流中的块级盒参与，body是root BFC。那么脱离文档流的元素布局呢？来看其他能创建新的BFC的情况：
　　1) position: absolute;
　　2) overflow: ！visible;的块级盒子
　　3) float:left/right;

　　4) 不是块级盒子的block containers比如 display:inline-block/table-cell/table-caption

　　新的BFC里面的布局不影响外面的，反之亦然。

　　2. 在BFC中，每个盒子的左外边框紧靠他的包含块的左边框（从右到左则为右边框紧挨），即使相邻元素存在着浮动（但盒子的边框会因这个浮动而收缩），除非这个盒子的内部创建了一个新的BFC（此时盒子因为相邻元素的浮动而变窄），这是盒子左外边框就跑到浮动元素右/后边去了。典型的例子是文字环绕浮动的图片。

IFC -- Inline Formatting Contexts （内联格式上下文）

行内元素/内联元素（inline-level elements） -- 是指那些不会形成新的内容块的源文档的元素，内容被分布在行间，例如，内容段落或内联图片。--  display:inline/inline-table/inline-block. 行内元素生成行级盒子

inline-level box -- 行内级盒子，参与IFC内联格式上下文。

inline box -- 行内盒子，既是内联的(inline-level)，同时他的内容参与他的IFC的。例如display:inline产生一个行内盒子，但是置换元素/inline-block/inline-table产生的不是行内盒子。。。

IFC --

　　1) 在IFC中，所有盒子一个接一个水平排列，从包含块的顶部开始。这些盒子之间的水平margins,borders和paddings互不影响，不合并。盒子可以通过多种方式实现垂直居中/上/下/基线... 包含这些形成一行的矩形区域叫做line box行盒。

　　2) 行盒的宽度由他的包含块和出现的floats共同决定，高度规则：

　　　 行盒中的每个行内级盒子大小 VS 置换元素/inline-block/inline-table元素的margin box高度 VS 行内盒子的line-height 中的最高者。

　　　 行内级盒子可以通过他们的vertical-align实现对齐方式，同时影响行盒高度。

　　　 行盒的高度是最高的盒子的顶部到最低的盒子底部之间的距离。

　　　 空的内联元素inline element产生空的行内盒子，仍可有margin border padding line-height

　　3) 行盒总是足够高来包含他内部的盒子们，也可能比内部最高的盒子高(例如盒子基线对齐)。当一个盒子高度小于包含它的行盒时，该盒子的垂直对齐由vertical-align决定。当几个盒子水平方向不能装在一个行盒时，他们被分发一堆垂直的行盒，因此，一个段落就是一堆垂直的行盒。行盒们没有垂直的隔离地堆积在一起 ，并且他们不会重叠。

　　4) 一般地，行盒的左边触碰到他的包含块的左边，右边触碰包含块的右边，但是，浮动盒子可能会出现在包含块的边和行盒的边之间，因此，尽管统一IFC中的行盒一般会有相同的宽度（即包含块的宽度），但是他们的宽度可能不同当水平空间因为float而减少时。统一IFC的行盒的高度是不同的。

　　5) 当一行的行内级盒子宽度总和比包含它们的行盒小时，他们的水平分布由text-align决定。如果取值justify那么用户代理也可能在行盒拉伸空间和文字（inline-table和inline-block盒子不适用）.

　　6) 当行内盒子超出行盒宽度时，他会被分割成几个盒子，这些盒子分布到几个行盒中。如果一个行内盒子不能被分割开（例如行内盒子包含单个字母，特殊的不允许在行内盒子断字的语言 或white-space:nowrap/pre），那么行内盒子溢出行盒（水平方向）。

　　7) 当行内盒子被分割时，margins,borders,paddings在分割发生的地方没有可见的效果（或者有很多分割时的每一个分割）

　　8) 行内盒子也可以被分割成位于同一行盒的盒子， 参考'direction' and 'unicode-bidi' ！！！

　　9) 行盒在IFC中被创建来hold行内级内容的，那些不包含文本，不包含preserved white space，不包含margin/padding/border非0的行内元素，不包含其他in-flow内容（如image，inline blocks, inline tables），不以preservered newline结束的行盒必须被看做高度为0的行盒以便于决定他们内部的元素的定位，并且必须被视为不存在的。

　　例如：

　　   <P>Several <EM>emphasized words</EM> appear

     <STRONG>in this</STRONG> sentence, dear.</P>

  在p的块盒总包含5ge行内盒子，em盒子，strong盒子和3个匿名盒子。p的块盒生成行盒的包含块，包含块足够到时，只有一个行盒就够了；否则就会有多个行盒，行内盒子可能被分割。 下面是W3C官网的示例，em盒子设置了margin，padding，border，并且它被分割了，可以看到emphasized之后，words之前没有任何padding，margin，border的可视化效果。