BFC/IFC参与方式的区别

Question

据我所知，overflow: hidden 和display: inline-block 都在.mid-column 中建立了一个新的BFC。但是，前者会使.mid-column 成为块盒，而后者会使它成为原子内联盒。

使用overflow: hidden

.left-column {
  float: left;
  background-color: grey;
}
.right-column {
  float: right;
  background-color: grey;
}
.mid-column {
  overflow: hidden;
}

<div class="wrapper">
  <div class="left-column">
    <h3>Left Column</h3>
  </div>
  <div class="right-column">
    <h3>Right Column</h3>
  </div>
  <div class="mid-column">
    <h3>Mid Column</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="left-column">
      <h3>Inner Left Column</h3>
    </div>
    <div class="right-column">
      <h3>Inner Right Column</h3>
    </div>
  </div>
</div>

使用display: inline-block

.left-column {
  float: left;
  background-color: grey;
}
.right-column {
  float: right;
  background-color: grey;
}
.mid-column {
  display: inline-block;
}

<div class="wrapper">
  <div class="left-column">
    <h3>Left Column</h3>
  </div>
  <div class="right-column">
    <h3>Right Column</h3>
  </div>
  <div class="mid-column">
    <h3>Mid Column</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="left-column">
      <h3>Inner Left Column</h3>
    </div>
    <div class="right-column">
      <h3>Inner Right Column</h3>
    </div>
  </div>
</div>

我只能解释第一个演示中的布局。根据document（我的粗体）：

在块格式化上下文中，每个框的左外边缘接触 包含块的左边缘（对于从右到左的格式，右 边缘接触）。即使有浮点数也是如此（尽管 box 的 line box 可能会因为浮动而缩小），除非 box 建立一个新的块格式化上下文（在这种情况下，盒子 本身 may become narrower 由于浮动）。

overflow: hidden规则建立了一个新的BFC，thus，.mid-column的边框不能与.left-column和right-column的边框重叠。

至于第二个demo，我唯一知道的是.mid-column周围有一个匿名block box，为它建立了一个IFC。不幸的是，我无法进一步解释。

我的问题是：加入 IFC 而不是 BFC 对布局有何影响？如果有人可以对第二个演示提供详细解释，或者至少提供相关文档的链接以便我弄清楚，那就太好了。

Answer 1

加入 IFC 而不是 BFC 对布局有何影响？

行内级框内嵌在行框上，就像文本一样。这里的所有都是它的。一个盒子参与的格式化上下文对盒子可能为它的内容建立的任何格式化上下文没有影响（如果它建立了一个）。

.mid-column 本身，当显示为内联块时，参与由匿名块框（为此目的创建）建立的 IFC，但就.mid-column 的后代而言，它们正在参与在由.mid-column 建立的 BFC 中。无论发生在此 BFC 之外的任何情况，他们都不会关心，并且 BFC 之外的元素永远不会干扰发生在此 BFC 中的块布局。

在第二个演示中围绕.mid-column 生成的匿名块框参与了根 BFC。 .wrapper 在任一演示中都没有建立 BFC。由于浮动占用了.wrapper 的可用宽度（进而是匿名块框），因此.mid-column 没有足够的空间与浮动垂直对齐，这就是.mid-column 被推下的原因。

相关链接已在cmets中提供； CSS2 的第 9.4 节告诉你你需要知道的一切。