html - 新 BFC "clearing" float 框

Question

如示例所示，应用 display: inline-block;包含 block 似乎“清除”了其中的 float 框。

.wrapper-inline-block {
  display: inline-block;
}
.left-column {
  background-color: teal;
  float: left;
}

<div class="wrapper-inline-block">
  <div class="left-column">
    <p>Float</p>
  </div>
  <p>Non-float</p>
</div>

<hr>

<div class="wrapper">
  <div class="left-column">
    <p>Float</p>
  </div>
  <p>Non-float</p>
</div>

我不知道这是怎么发生的。我所知道的是 display: inline-block;创建一个新的 block 格式化上下文。

我的问题是:新的 BFC 如何“清除”其中的 float 框？

---

后续问题:

奇怪的是，当我改变<p>Non-float</p>至 Non-float ，“清除”效果消失。如果有人能向我解释背后的原因，那就太好了。

.wrapper-inline-block {
  display: inline-block;
}
.left-column {
  background-color: teal;
  float: left;
}

<div class="wrapper-inline-block">
  <div class="left-column">
    <p>Float</p>
  </div>
  Non-float
</div>

<hr>

<div class="wrapper">
  <div class="left-column">
    <p>Float</p>
  </div>
  Non-float
</div>

Answer 1

那是因为具有默认 width: auto 的内联 block 是根据 shrink-to-fit 调整大小的算法。 CSS2.1 并未完全定义该算法应如何处理 float 内容，但浏览器似乎会这样做:

1. 内联 block 的大小忽略了 float
2. 行内 block 内的行框与行内 block 一样宽
3. float 缩小行框
4. 因此，非 float 内容不再适合缩小的空间，因此换行到下一行。

请注意没有清除，如果您使行内 block 足够宽，文本将出现在 float 旁边。

.wrapper.inline-block {
  display: inline-block;
}
.w400 {
  width: 400px;
}
.wrapper {
  border: 1px solid;
}
.left-column {
  background-color: teal;
  float: left;
}

<p>Shrink-to-fit inline-block:</p>
<div class="wrapper inline-block">
  <div class="left-column">
    <p>Float</p>
  </div>
  <p>Non-float</p>
</div>
<p>Explicit width inline-block:</p>
<div class="wrapper inline-blockw w400">
  <div class="left-column">
    <p>Float</p>
  </div>
  <p>Non-float</p>
</div>
<p>Fill-available block:</p>
<div class="wrapper">
  <div class="left-column">
    <p>Float</p>
  </div>
  <p>Non-float</p>
</div>