CSS Float Logic

Question

CSS Float Logic

2.4k Views Asked by Zze At 03 April 2025 at 06:15

I have created 25 boxes of random width and height, where width == height (as shown)

$(document).ready(function(e) {
  for (var count = 0; count < 5; count++) {
    for (var iter = 0; iter < 5; iter++) {
      $(".content").append("<div id='" + count + "_" + iter + "' class='box'><p>" + count + "_" + iter + "</p></div>");
      $(".content div:last").width(Math.round((Math.random() * 100) + 50));
      $(".content div:last").height($(".content div:last").width());
    }
  }
});

.box {
  background: #FF0004;
  margin: 10px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="content">
  </div>
</body>

I am trying to better understand the float property logic and the reasoning behind the positioning of floating elements when they "stack" on each other. for instance (screenshots taken from fiddle):

enter image description here

What makes 3_3 relocate to the position as shown below when the screen is made bigger? enter image description here

According to W3Schools:

If you place several floating elements after each other, they will float next to each other if there is room.

So the question is, what does "room" mean and what is the logic which governs the location of floated elements?

The answer to this SO post: CSS Float explanation appears relevant, however it doesn't seem to explain why a floated element stops at a certain location.

Original Q&A

There are 1 best solutions below

**BoltClock** · Accepted Answer

Here's the part of the linked answer that's most relevant to your question:

When you float a block element, you are telling the browser to position it next to the previous floated object, so long as the container is wide enough (otherwise it will drop below the previous object).

As the author mentions this is a crude simplification. Section 9.5.1 of the spec has a list of all the precise rules, but I'm not going to quote the entire thing here as it is a very long read and only certain points are relevant here. I'll quote the relevant points as I step through exactly what is happening in your fiddle.

Compare your two screenshots. Pay attention to the two boxes that have changed positions, 3_2 and 3_3, as well as their surrounding boxes, 2_4, 3_0 and 3_1.

Before

Before

After

After

When the screen is made bigger, you make room for 3_2 to move from its original position next to 2_4, upward and next to 3_1:

A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

A floating box must be placed as high as possible.

A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

This in turn makes room for the next floating box to occupy the space as far up top and as far to the left as possible, following the same rule as above. As a result, 3_3 floats up, stopping just shy of 3_2, then it floats as far to the left as possible along the horizontal axis, stopping just shy of 2_4. Notice that even though it seems like 3_3 should be able to fit between 2_4 and 3_2, it does not, because the margins have to be respected (this is what is meant by "outer edge" above).

At this point, the following items apply, in addition to items #8 and #9 above:

If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

As 3_3 is so large, it creates a noticeable downward protrusion from the first line of floating boxes. This effectively increases the height of the first line. All the other floating elements following 3_3 must remain on their own line, and this second line of floats must not intersect the bottom margin edge of 3_3. This is mostly governed by item #5.

CSS Float Logic

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in CSS-FLOAT

Trending Questions

Popular # Hahtags

Popular Questions