css的BFC和IFC

下面咱们以<div><div>为例子。<div></div>标签被浏览器解析后会生成div元素并添加到document tree中，但CSS做用的对象并非document tree，而是根据document tree生成的render tree，而盒子模型就是render tree的节点。

* 注意: 
  * 1. CSS做用的是盒子(Box), 而不是元素(Element);
  * 2. JS没法直接操做盒子。

盒子模型的结构

 因为块级盒子在验证效果时干扰信息更少，便于理解盒子模型，所以下面将以块级盒子模型来说解。
  注意： 行级盒子模型与块级盒子模型结构一致，只是行级盒子在此基础上有自身特性而已。
  从上面两幅图说明盒子模型其实就是由如下4个盒子组成：
  1. content box：必备，由content area和4条content/inner edge组成；
  2. padding box：可选，由padding和4条padding edge组成。若padding宽度设置为0，则padding edge与content edage重叠；
  3. border box：可选，由border和4条border edge组成。若border宽度设置为0，则border edge与padding edage重叠；
  4. margin box：可选，由margin和4条margin/outer edge组成。若margin宽度设置为0，则margin edge与border edage重叠。
  对于刚接触CSS的同窗，常常会将"经过width/height属性设置div元素的宽/高"挂在口边，其实这句话是有误的。
  1. 首先css属性width和height做用于div元素所产生的盒子，而不是元素自己;
  2. 另外盒子模型由4个盒子组成，那width和height究竟是做用于哪些盒子呢？
  这里就分为IE盒子模型和标准盒子模型了。

IE5.5(怪异模式)采用IE盒子模型，其它将使用W3C标准盒子模型。

width = content-width + padding-width + border-width height = content-height + padding-height + border-height
标准盒子模型


width = content-width
height = content-height

咱们看到存在两种width/height的划分方式，到底哪一种才对呢？其实两种都对，具体看如何使用而已。另外IE8开始支持CSS3属性box-sizing，让咱们能够自由选择采用哪一种盒子:)
  box-sizing:content-box/border-box/inherit
                  content-box——默认值，采用Standard box model
                  border-box——采用IE box model
                  inherit——继承父元素属性值

IFC

IFC(Inline Formatting Context),直译为“行内格式化上下文”。咱们简单理解为每一个盒子都有一个FC特性，不一样的FC值表明一组盒子不一样的排列方式。有的FC值表示盒子从上到下垂直排列，有的FC值表示盒子从左到右水平排列等等。而IFC则是表示盒子从左到右的水平排列方式，仅此而已(注意：一个盒子仅且仅有一个FC值)。而inline-level box的FC特性值固定为IFC。另外仅处于in-flow的盒子才具备FC特性，也就是positioning scheme必须为Normal flow的盒子才具备FC特性。

  除了IFC外，对于inline-level box排版而言还有另外一个重要的对象，那就是line box。line box是一个看不见摸不着的边框，但每一行所占的垂直高度实际上是指line box的高度，而不是inline-level box的高度。

 line box的特色：
  1. 同一行inline-level box均属于同一个line box；

  2. line box高度的计算方式https://www.w3.org/TR/CSS21/visudet.html#line-height

 行级盒子小结

**就盒子模型而言** 

1. inline-level box与block-level box结构一致;
  2. content box的高度仅能经过属性font-size来设置，content box的宽度则自适应其内容而没法经过属性width设置;
  3. 当inline-level box的宽度大于containing block，且达到内容换行条件时，会将inline-level拆散为多个inline-level box并分布到多行中，而后当属性direction为ltr时，margin/border/padding-left将做用于第一个的inline-level box，margin/border/padding-right将做用于最后一个的inline-level box;若属性direction为rtl时，margin/border/padding-right将做用于第一个的inline-level box，margin/border/padding-left将做用于最后一个的inline-level box。

**垂直排版特性**
  inline-level box排版单位不是其自己，而是line box。重点在于line box高度的计算。
  1. 位于该行上的全部in-flow的inline-level box均参与该行line box高度的计算;(注意：是全部inline-level box，而不只仅是子元素所生成的inline-level box)
  2. replaced elements, inline-block elements, and inline-table elements将以其对应的opaque inline-level box的margin box高度参与line box高度的计算。而其余inline-level box则以line-height的实际值参与line box高度的计算;
  3. 各inline-level box根据vertical-align属性值相对各自的父容器做垂直方向对齐;
  4. 最上方的box的上边界到最下方的下边界则是line box的高度。（表述不够清晰，请参考实例理解）

IFC布局规则：

框会从包含块的顶部开始，一个接一个地水平摆放。
摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不一样形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都彻底包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。
行框必定会高到足以容纳它所包含的所有框。然而，它也可能比它所包含的最高的框还要高（例如：这些框是以基线对齐）。当框 B 的高度小于包含它的行框时，则 B 在行框中垂直对齐的位置由’vertical-align’ 属性来决定。当几个行级框在水平方向上没法塞得进同一个行框时，它们会被分布在两个或多个垂直堆放的行框中。行框会以既没有垂直间距 也没有重叠的方式被垂直堆放起来。

一般，行框的左边紧贴其包含块的左边，而行框的右边紧贴其包含块的右边。然而，浮动框能够插在包含块边缘与行框边缘之间。所以，尽管在同一个IFC中的行框一般有一样的宽度（也就是其包含块的宽度），但它们的宽度也可能受浮动让水平可用空间减小的影响而有所改变。在同一个IFC中，行框的高度一般是变化的（例如：某一行包含了一个比较高的图片，而其它行只包含文本）。

当一行上的行级框的总宽度小于包含它们的行框的宽度，则它们在行框内的水平分布由’text-align’属性来决定。

当一个行内框的宽度超过了行框的宽度，则它会被分割成几个框，而这些框会分布在几个行框。若是此行内框不可分割（例如：单个字符、或语言指定的文字打断规则不容许在此行内框中出现打断、或该行内框受 white-space 属性为 nowrap或 pre 的影响），那么该行内框溢出该行框。

行内框被分割的时候，外边距、边框和内边距在出现分割的地方都没有视觉效果。
**行高计算 ― ‘line-height’ 与 ‘vertical-align’ 属性**
计算行框里的各行内级框的高度。对于置换元素、行内块元素、行内表格元素来讲，这是边界框的高度，对于行内框来讲，这是其 ‘line-height’。
行内级元素根据其 ‘vertical-align’ 属性垂直对齐。
行框的高是最顶端框的顶边到最底端框的底边的距离。

BFC

BFC(Block Formatting Context)块级格式化上下文 

BFC则是表示盒子从上到下的垂直排列方式，仅此而已(注意：一个盒子仅且仅有一个FC值)。

 

BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

实现BFC：

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible