浮动旁边的 Flexbox - 为什么/如何占用剩余空间？

Question

当弹性框被放在float: left 旁边时会出现，它会占用剩余空间，并且不会环绕浮动。

这是如何以及为什么会发生的？任何其他display 可以做到这一点，还是 flexbox 独有的？

.float {
  float: left;
  padding: 10px;
  background: rgba(0,255,0,.1)
}

.regular-div {
  padding: 10px;
  background: rgba(0,0,255,.1);
}

.flexbox {
  display: flex;
  padding: 10px;
  background: rgba(0,255,255,.1);
}

.table {
  display: table;
  padding: 10px;
  background: rgba(255, 255, 0, .1);
}

<b>Example one: Float with a div next to it</b>
<div>
  <div class="float">
    I am floating left.
  </div>

  <div class="regular-div">
      I'm a regular div after the float.
      <br>My content should wrap around the float.
      <br>Look at it go!
      <br>Wow!
  </div>
</div>

<br><br>
<b>Example two: Float with a flexbox next to it</b>
<div>
  <div class="float">
    I am floating left.
  </div>

  <div class="flexbox">
      I'm a flexbox. I do not wrap the div, and I occupy the remaining space to the right.<br>
      Why does this happen?
      Can any other "display" do this?
  </div>
</div>

<br><br>
<b>Example three: Float with a table next to it</b>
<div>
  <div class="float">
    I am floating left.
  </div>

  <div class="table">
      I am a table.<br>
      I position myself like a flexbox<br>
      But I shrink to fit.
  </div>
</div>

Answer 1

来自the specification：

弹性容器为其内容建立新的弹性格式化上下文。这与建立 块格式化上下文 相同，只是使用 flex 布局而不是块布局。例如，浮动不会侵入 flex 容器，并且 flex 容器的边距不会与其内容的边距一起折叠。 Flex 容器为它们的内容形成一个包含块，就像块容器一样。 [CSS21] 溢出属性适用于弹性容器。

如果你对它应用溢出，一个普通的 div 也会做同样的事情（它会创建一个块格式化上下文）

.float {
  float: left;
  padding: 10px;
  background: rgba(0,255,0,.1)
}

.regular-div {
  padding: 10px;
  overflow:auto;
  background: rgba(0,0,255,.1);
}

.flexbox {
  display: flex;
  padding: 10px;
  background: rgba(0,255,255,.1);
}

.table {
  display: table;
  padding: 10px;
  background: rgba(255, 255, 0, .1);
}

<b>Example one: Float with a div next to it</b>
<div>
  <div class="float">
    I am floating left.
  </div>

  <div class="regular-div">
      I'm a regular div after the float.
      <br>My content should wrap around the float.
      <br>Look at it go!
      <br>Wow!
  </div>
</div>

<br><br>
<b>Example two: Float with a flexbox next to it</b>
<div>
  <div class="float">
    I am floating left.
  </div>

  <div class="flexbox">
      I'm a flexbox. I do not wrap the div, and I occupy the remaining space to the right.<br>
      Why does this happen?
      Can any other "display" do this?
  </div>
</div>

<br><br>
<b>Example three: Float with a table next to it</b>
<div>
  <div class="float">
    I am floating left.
  </div>

  <div class="table">
      I am a table.<br>
      I position myself like a flexbox<br>
      But I shrink to fit.
  </div>
</div>

所以这实际上与显示属性无关，而是与块格式化上下文的创建有关。如果是这种情况，那么 float 的行为会有所不同。

表格的边框框，块级替换元素，或正常流程中建立新的块格式化上下文的元素（例如具有'溢出'而不是'的元素visible') 不得与元素本身在同一块格式化上下文中的任何浮动的边距框重叠。如有必要，实现应通过将其放置在任何前面的浮动下方来清除所述元素，但如果有足够的空间，可以将其放置在此类浮动附近。 ^ref

---

对于宽度，情况就不同了。表格元素不会填满所有剩余空间，因为它的宽度由 shrink-to-fit 算法定义（如 inline-block 和 float!）。这样的元素不会与浮动元素交互，它们的宽度会适合它们的内容。

其他一些例子：

.float {
  float: left;
  padding: 10px;
  background: rgba(0,255,0,.1)
}

.regular-div {
  padding: 10px;
  background: rgba(0,0,255,.1);
}
.main {
  overflow:auto;
  border:2px solid;
}

<div class="main">
  <div class="float">
    I am floating left.
  </div>

  <div class="regular-div" style="display:inline-block;">
      I'm a regular div after the float.
      <br>My content should wrap around the float.
      <br>Look at it go!
      <br>Wow!
  </div>
</div>
<br>
<div class="main">
  <div class="float">
    I am floating left.
  </div>

  <div class="regular-div" style="float:left;">
      I'm a regular div after the float.
      <br>My content should wrap around the float.
      <br>Look at it go!
      <br>Wow!
  </div>
</div>
<br>
<div class="main">
  <div class="float">
    I am floating left.
  </div>

  <div class="regular-div" style="display:grid;">
      I'm a regular div after the float.
      <br>My content should wrap around the float.
      <br>Look at it go!
      <br>Wow!
  </div>
</div>
<br>
<div class="main">
  <div class="float">
    I am floating left.
  </div>

  <div class="regular-div" style="display:inline-flex;">
      I'm a regular div after the float.
      <br>My content should wrap around the float.
      <br>Look at it go!
      <br>Wow!
  </div>
</div>
<br>
<div class="main">
  <div class="float">
    I am floating left.
  </div>

  <div class="regular-div" style="columns:1">
      I'm a regular div after the float.
      <br>My content should wrap around the float.
      <br>Look at it go!
      <br>Wow!
  </div>
</div>

您可以在此处找到创建块格式化上下文的完整属性列表：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

总结：如果你想让你的元素填充浮动元素之后的剩余空间，你需要确保它创建了一个 BFC 并且它不是 shrink-to-fit 元素，它是一个流入元素（您可以使用 position:absolute 创建 BFC）

Answer 2

floated elements 周围的环绕效果仅适用于 inline boxes。这些基本上是文本。

块级容器不是内联框，因此不会环绕浮动元素。