html - BFC/IFC参与方式的区别

Question

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

Using 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>

Using 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>

我只能解释第一个demo中的布局。根据document (大胆的矿山):

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

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

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

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

Answer 1

How does participating into an IFC, rather than a BFC, affect the layout?

行内级框在行框上以内联方式流动，如文本。这里的所有都是它的。框参与的格式化上下文对其内容可能建立的任何格式化上下文没有影响(如果它建立的话)。

.mid-column 本身，当显示为行内 block 时，参与由匿名 block 框(为此目的创建)建立的 IFC，但就 .mid-column 而言，他们正在参与由 .mid-column 建立的 BFC。无论此 BFC 之外发生什么，他们都不会关心，并且 BFC 之外的元素永远不会干扰正在此 BFC 中发生的 block 布局。

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

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