what does "either it fits or there are no more floats present" mean in the W3C specs regarding float?

Question

.wrapper {
  width: 500px;
}

.image {
  display: inline-block;
  width: 50%;
  height: 100px;
  background: red;
}

.image1 {
  float: left;
  width: 50%;
  height: 50px;
  background: yellow;
}

.image2 {
  float: left;
  width: 50%;
  height: 50px;
  background: red;
}

<div class="wrapper">
  <div class="image"></div>
  <div class="image1"></div>
  <div class="image2"></div>
</div>

https://jsfiddle.net/8akzqx3p/

What I originally thought was that image2 was just below image1. However, it is far below. I found this reason in the W3C specs, but I don't know what this means.

https://www.w3.org/TR/CSS21/visuren.html#floats

If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

But I don't know what it means, especially "either it fits or there are no more floats present"

Answer 1

To understand this, we need to take both the part you quoted and its preceding paragraph. Together they say:

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

Which means:

If there is a line box ...

Initially the first inline-block image causes a line box to exist which is the height of the image vertically aligned with the line box's strut. (So just slightly taller than the image alone). Because there are other elements inside the block formatting context (the floats) the line box will be wrapped in an anonymous block box.

So the first floated image just fits alongside, and its top is aligned with the top of that line box.

But there's no space for a second floated image that both can be aligned with the top of that line box and alongside the inline-block image. So this second floated image must be placed after that line box, and after the anonymous block box that wraps it. There is no second line box so

it is shifted downward until either it fits ...

We're in a block formatting context here, so after a block box, means immediately following it on the block axis. There it fits, so that's where it is placed.

... or there are no more floats present.

This is not in play in your example. It allows for the case where the width of the float is defined as having a width of, for example, 110% of its containing block. It'll never fit, but can be placed immediately below the point where there are no preceding floats alongside it.