CSS float logic( inner text not moved)

Question

I would like to know float logic. Please see below code.

<div style="width:300px;height:100px;border:1px solid gray;">
    <div style="width:50px;height:50px;float:left;border:1px solid gray">a</div>
    <div style="width:25px;height:25px;background:blue">b</div>
</div>

result

http://jsfiddle.net/5ccLv2tb/

I can understand logic that blue box moves to left 0 top 0. But Why is inner text (b) not moved ?

Answer 1

The blue box is a block level box and its position is explained by the following:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

(http://www.w3.org/TR/CSS21/visuren.html#floats)

The text "b" is a line box or a line of text, this means it will flow around the float under normal circumstances:

A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.

(http://www.w3.org/TR/CSS21/visuren.html#floats)

This can be seen if we remove the width restriction in your example:

<div style="width:300px;height:100px;border:1px solid gray;">
    <div style="width:50px;height:50px;float:left;border:1px solid gray">a</div>
    <div style="height:25px;background:blue">b</div>
</div>

However, as you have provided a width for the blue box the following is apparent:

If a shortened line box is too small to contain any content, then the line box is shifted downward (and its width recomputed) until either some content fits or there are no more floats present.

(http://www.w3.org/TR/CSS21/visuren.html#floats)

As there is no room for the text to flow alongside the floated element it gets pushed down below it. It appears disconnected from the blue box as its dimensions have been restricted and overflow is set to visible by default.

Removing the height restriction from your example will show how the blue box would normally expand to fit the text:

<div style="width:300px;height:100px;border:1px solid gray;">
    <div style="width:50px;height:50px;float:left;border:1px solid gray">a</div>
    <div style="width:25px;background:blue">b</div>
</div>

Answer 2

Essentially what's happening is that your second inner div, the one with the blue background and letter "b" as its content, isn't wide enough for the content to remain within the boundaries of the block you created, so it's pushed below the floated div, almost as if the clear property was set to left or both.

The W3 states:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

Further...

If a shortened line box is too small to contain any content, then the line box is shifted downward (and its width recomputed) until either some content fits or there are no more floats present. 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.

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. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

You can see that if the second inner div with the blue background is wider, say about 60px, then the content site to the right of the floated div, which is what is normally expected.

Example. In the following document fragment, the containing block is too narrow to contain the content next to the float, so the content gets moved to below the floats where it is aligned in the line box according to the text-align property.

p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }

<p>
  <span> </span>
  Supercalifragilisticexpialidocious
</p>

This fragment might look like this: