学了BFC，发现还有IFC。

IFC概念

IFC（行级格式化上下文Inline Formatting Context），行内级格式化上下文用来规定行内级盒子的格式化规则。

形成IFC的条件

既然块级元素会触发BFC，那么内联元素会触发的则是IFC

IFC生成条件

IFC 只有在一个块级元素中仅包含内联级别元素时才会生成。

image.png

IFC原理

  • 内部的box 会在水平方向排布
  • 这些box 之间的水平方向的margin、boder、padding 都有效
  • Box垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认，文本与图片对其），例：line-heigth与vertical-align。

布局规则

  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。

IFC 的作用

  • 水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过设置父容器 text-align:center 则可以使其水平居中。

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

  • 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其 5，其他行内元素则可以在此父元素下垂直居中。