新的BFC“清除”浮箱 [英] New BFC "clearing" floating boxes

问题描述

如示例所示，对包含块应用 display：inline-block; 似乎可以清除其中的浮动框。

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

 < div class =wrapper -inline块> < div class =left-column> < p为H.浮法< / p为H. < / DIV> < p>非浮动< / p>< / div>< hr>< div class =wrapper> < div class =left-column> < p为H.浮法< / p为H. < / DIV> < p> Non-float< / p>< / div>  

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

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

---

后续问题：

奇怪的是，当我将< p>非浮动< / p> 更改为非浮动，清除效果消失。如果有人能够向我解释背后的原因，那将是非常好的。

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

 < div class =wrapper -inline块> < div class =left-column> < p为H.浮法< / p为H. < / DIV>非浮动< / div>< hr>< div class =wrapper> < div class =left-column> < p为H.浮法< / p为H. < / DIV> Non-float< / div>  

解决方案

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

1. 嵌入块的大小忽略花车


2. 内联块内的行框与内联块一样宽


3. 浮动缩小行框


4. 因此，非浮动内容不再适合缩小的空间，所以换行到下一行。

请注意，没有任何清除，如果您将内嵌块放宽，文本将显示在浮动旁边。 data-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  .wrapper.inline-block {display：inline-block;}。w400 {width：400px;}。wrapper {border：1px solid;}。left-column {background彩色：蓝绿色; float：left;}  

< p> Shrink-to -fit inline-block：< / p>< div class =wrapper inline-block> < div class =left-column> < p为H.浮法< / p为H. < / DIV> < p>< div>< p>< / div>< p>显式宽度inline-block：< / p>< div class =wrapper inline-blockw w400> < div class =left-column> < p为H.浮法< / p为H. < / DIV> < p> Non-float< / p>< / div>< p>填充区块：< / p>< div class =wrapper> < div class =left-column> < p为H.浮法< / p为H. < / DIV> < p>< p>< / div>< p>< p>< / p>

As the example shows, applying display: inline-block; to the containing block seems to "clear" the floating box within.

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

I have no idea how this happens. All what I know is that display: inline-block; creates a new block formatting context.

My question is: how does the new BFC "clear" floating boxes within?

---

Followup question:

Curiously, when I change <p>Non-float</p> to Non-float, the "clearing" effect disappears. It would be nice if someone can explain the reason behind to me.

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

解决方案

That's because inline-blocks with the default width: auto are sized according to the shrink-to-fit algorithm. CSS2.1 does not fully define how that algorithm should handle floating contents, but it seems browsers do this:

1. The inline-block is sized ignoring floats
2. The line boxes inside the inline-block are as wide as the inline-block
3. The float shrinks the line boxes
4. Therefore, the non-floating contents no longer fit in the shrunk space, so the wrap to the next line.

Note there is no clearing, if you make the inline-block wide enough, the text will appear next to the 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>

这篇关于新的BFC“清除”浮箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！