BFC与IFC

block-level box: display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。

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

run-in box: css3中才有。

BFC（Block Formatting Contexts）块级格式化上下文

块格式化上下文（block formatting context）是一个独立的渲染区域，容器里面的子元素不会在布局上影响到外面的元素。只有Block-level box参与， 它规定了内部的Block-level Box如何布局。块格式化上下文包括了创建该上下文的元素的所有子元素，但不包括创建了新的块格式化上下文的子元素。

如何生成

1. 根元素

2. float属性不为none

3. position为absolute或fixed

4. display为inline-block, table-cell, table-caption, flex, inline-flex

5. overflow不为visible

布局规则

1. 内部的Box会在垂直方向，一个接一个地放置。

2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4. BFC的区域不会与float box重叠。

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6. 计算BFC的高度时，浮动元素也参与计算。

应用

1. 解决margin重叠问题

2. 解决float导致高度塌陷问题

3. 解决文字环绕问题（该方法可用于自适应布局）

例如：

.containbox {
    border: 1px solid black;
    width: 300px;
    height: 300px;
  }
  
  .leftbox {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  
  .rightbox {
    height: 250px;
    background-color: #fff500;
  }
<div class="containbox">
    <div class="leftbox"></div>
    <div class="rightbox">rightbox占满containbox的整个宽度。但是因为rightbox中的文字会为leftbox让位，所以看起来的效果就像是rightbox自动占满了剩余空间，超过leftbox高度部分的rightbox的左边框紧贴containbox的左边。</div>
  </div>

给rightbox添加overflow: hidden，触发新的BFC，则

IFC（Inline Formatting Contexts）行内级格式化上下文

如何生成

由display:inline 的非替换元素生成。可替换行内元素，或 display 值为 inline-block 或 inline-table 的元素不能生成IFC，因此不能拆分成多个盒。
例如：

.containbox {
    border: 1px solid black;
    width: 12em;
  }
<div class="containbox">
    span 里的文本 <span class="innertext">可以分成多行,因为它</span> 是个行内盒。
</div>

给innertext添加display: inline-block，则span里的文本因为剩余空间放不下，就另起一行开始放。

布局规则

1. 内部的盒子会在水平方向，一个接一个地放置。

2. 这些盒子垂直方向的起点从包含块盒子的顶部开始。

3. 摆放这些盒子的时候，它们在水平方向上的 padding、border、margin 所占用的空间都会被考虑在内。

4. 在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。

5. 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。

6. IFC中的 line box 一般左右边都贴紧其包含块，但是会因为float元素的存在发生变化。float 元素会位于IFC与与 line box 之间，使得 line box 宽度缩短。
   

7. IFC 中的 line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同（比如一行包含了较高的图片，而另一行只有文本）

8. 当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性来确定，如果取值为 justify，那么浏览器会对 inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。

9. 当一个 inline box 超过 line box 的宽度时，它会被分割成多个boxes，这些 boxes 被分布在多个 line box 里。如果一个 inline box 不能被分割（比如只包含单个字符，或 word-breaking 机制被禁用，或该行内框受 white-space 属性值为 nowrap 或 pre 的影响），那么这个 inline box 将溢出这个 line box。

10. line box 的生存条件是在IFC中并且包含inline-level元素，如果line box里没有文本，空白，margin/padding/border 非0的行内元素，以及其他常规流中的内容(比如，images，inline blocks 和 inline tables)， 并且不是以换行结束的，将被当作零高度行框对待，也将会被视为没有意义。

注意：

1. 在IFC的环境中，是不能存在block-level元素的，如果将block-level元素插入到IFC中，那么此IFC将会被破坏掉， 而block-level元素前的元素和block-level元素后的元素将会各自自动产生一个匿名容器其包围，这个匿名的容器内部环境将是一个新的 IFC。

2. 设置一个块为 inline-block ，以单个封闭块来参与外部的 IFC，而内部则生成了一个 BFC。

参考自：
视觉格式化模型
KB010: 常规流
Inline formatting contexts
谈谈一些有趣的CSS题目