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如何布局。块格式化上下文包括了创建该上下文的元素的所有子元素，但不包括创建了新的块格式化上下文的子元素。
如何生成
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
布局规则
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
应用
解决margin重叠问题
解决float导致高度塌陷问题
解决文字环绕问题（该方法可用于自适应布局）
例如：
.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里的文本因为剩余空间放不下，就另起一行开始放。
布局规则
内部的盒子会在水平方向，一个接一个地放置。
这些盒子垂直方向的起点从包含块盒子的顶部开始。
摆放这些盒子的时候，它们在水平方向上的 padding、border、margin 所占用的空间都会被考虑在内。
在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。
IFC中的 line box 一般左右边都贴紧其包含块，但是会因为float元素的存在发生变化。float 元素会位于IFC与与 line box 之间，使得 line box 宽度缩短。
IFC 中的 line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同（比如一行包含了较高的图片，而另一行只有文本）
当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性来确定，如果取值为 justify，那么浏览器会对 inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。
当一个 inline box 超过 line box 的宽度时，它会被分割成多个boxes，这些 boxes 被分布在多个 line box 里。如果一个 inline box 不能被分割（比如只包含单个字符，或 word-breaking 机制被禁用，或该行内框受 white-space 属性值为 nowrap 或 pre 的影响），那么这个 inline box 将溢出这个 line box。
line box 的生存条件是在IFC中并且包含inline-level元素，如果line box里没有文本，空白，margin/padding/border 非0的行内元素，以及其他常规流中的内容(比如，images，inline blocks 和 inline tables)， 并且不是以换行结束的，将被当作零高度行框对待，也将会被视为没有意义。
注意：
在IFC的环境中，是不能存在block-level元素的，如果将block-level元素插入到IFC中，那么此IFC将会被破坏掉， 而block-level元素前的元素和block-level元素后的元素将会各自自动产生一个匿名容器其包围，这个匿名的容器内部环境将是一个新的 IFC。
设置一个块为 inline-block ，以单个封闭块来参与外部的 IFC，而内部则生成了一个 BFC。
