新 BFC "clearing" 个浮动框

Question

如示例所示，将 display: inline-block; 应用于包含块似乎 "clear" 中的浮动框。

.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; 创建了一个新的块格式化上下文。

我的问题是：新的BFC "clear" 内如何浮动框？

后续问题：

奇怪的是，当我将 <p>Non-float</p> 更改为 Non-float 时，"clearing" 效果消失了。如果有人可以向我解释背后的原因，那就太好了。

.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 的内联块是根据 shrink-to-fit 算法调整大小的。 CSS2.1 没有完全定义算法应该如何处理浮动内容，但浏览器似乎是这样做的：

内联块的大小忽略浮点数
行内块内的行框与行内块一样宽
浮动缩小线框
因此，非浮动内容不再适合缩小后的内容 space，因此换行到下一行。

注意没有清除，如果你使行内块足够宽，文本将出现在浮动旁边。

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

新 BFC "clearing" 个浮动框

New BFC "clearing" floating boxes

html

css

layout

css-float