Question

如示例所示，将raw_input应用于包含块似乎“清除”其中的浮动框。

display: inline-block;

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

我的问题是：新BFC如何“清除”浮动框？

后续问题：

奇怪的是，当我将display: inline-block;更改为<p>Non-float</p>时，“清除”效果消失了。如果有人能够向我解释背后的原因，那就太好了。

Non-float

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

Answer 1

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

内联块的大小忽略浮动
内联块内的线框与内联块
浮动收缩线框
因此，非浮动内容不再适合收缩空间，因此换行到下一行。

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

.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“清理”浮箱

1 个答案: