Why the floating element does not squeeze the inline element?

Issue

I am trying to study the behavior of css float. Here is something wired: JSFiddle. I have a container, one inline span and two floating p:

<div id="box1">
    <span>Box 1</span>
    <p id="p1">Paragraph 1</p>
    <p id="p2">Paragraph 2</p>
</div>

If the span is not there, p1 and p2 will be on the same line. However, while p1 squeezes the span to the right, the p2 is put into the next line!

In my understanding, p2 should be put at the right of p1, and the span should be squeezed down to the next line. I have checked the Spec but cannot find the reason. (Well, maybe I didn’t understand the Spec).

What is the reason?

Solution

Normally, if there were no width constraints, #p1 and #p2 would both float together with the span appearing next to #p2.

But because the span appears first in the markup, followed by the floating elements, this means the span needs to be positioned as high as possible, with the floats following along the same line as the span (and subsequent lines if necessary). This line is known as the “current line” in the spec. Here are the relevant quotes from the section you’ve linked to:

A float is a box that is shifted to the left or right on the current line.

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.

Any content in the current line before a floated box is reflowed in the same line on the other side of the float. In other words, if inline-level boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline-level boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.

Since there is not enough room to contain both floats and the span on the same line, this forces #p2 to be pushed to the next line because there is only enough room to hold #p1 and the span on the first line.

If you widen the container enough, you’ll see that both floats will appear on the same line as the span. The key here is that the span must be as high as possible since it appears before the floats, and then the floats may be no higher (this is mentioned in section 9.5.1):

  1. The outer top of an element’s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

Alternatively, if you move the span to the end of the container like so:

<div id="box1">
    <p id="p1">Paragraph 1</p>
    <p id="p2">Paragraph 2</p>
    <span>Box 1</span>
</div>

Then the floats will appear first, with the span moving to the next line as there is not enough room to afford it on the same line as the floats.

Answered By – BoltClock

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published