CODEWITHSUNDEEP
htmlcsscss-float
Joy
Joy

Reputation: 9560

Why the floating element does not squeeze the inline element?

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?

Upvotes: 1

Views: 206

Answers (2)

user18944870
user18944870

Reputation:

I've done several experiments and this is the key to floats as far as inline elements go according to the wonderful statement given by @BoltClock "A float is a box that is shifted to the left or right on the current line."

To this I would add that always always always the document source predominates and that when floats are wanted to float to the left/right the inline elements will give them priority by setting to the left/right depending on which side the float element is floating.

enter image description here

You can see it better if you remove the html and put element by element and see where the current line is going to be.

Upvotes: 0

BoltClock
BoltClock

Reputation: 724542

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.

Upvotes: 2

Related Questions