浮动框旁边的 Flexbox -- why/how 是否占用了剩余的 space？

Question

当 flexbox 放置在 float: left 旁边时出现，它占据剩余的 space，并且不环绕浮动。

这是怎么发生的，为什么会发生？任何其他 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：

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. [CSS21] The overflow property applies to flex containers.

如果您对其应用溢出，则常规 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 的行为就会不同。

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. ^ref

对于宽度，这是另一回事。 table 元素不会填满剩余的所有 space，因为它的宽度由 缩小到适合 算法定义（如 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

总而言之：如果您希望您的元素填充浮动元素后剩余的 space，您需要确保它创建了一个 BFC 而不是 收缩到适合 元素，它是流入元素（您可以使用 position:absolute 创建 BFC）

Answer 2

floated elements works only with inline boxes 周围的环绕效果。这些基本上是文本运行。

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

浮动框旁边的 Flexbox -- why/how 是否占用了剩余的 space？

Flexbox next to a float -- why/how does it take up remaining space?

html

css

css-float

flexbox