In W3C's explanation of the Visual Formatting Model, Section 9.2.1 state that:
a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.
It gives this example:
<DIV>
Some text
<P>More text
</DIV>
and states:
if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.
It achieves this, it explains, by wrapping "Some text" in an anonymous block-level box.
But if we add an inline element to the box:
<DIV>
Some text
<P>More text
<span>An inline element</span>
</DIV>
The result—JsFiddle—seems to contradict the original statement that a block container box "contains only block-level boxes or...only inline-level boxes":
It appears that the addition of the span creates a block-level box that contains both block-level boxes (one anonymous, one explicit) and an inline-level box.
Has adding the <span>
established an inline formatting context? If this is true, doesn't that contradict the statement that an inline formatting context contains only inline-level boxes?
Am I missing something here, or is the W3C logic paradoxical?
EDIT:
So it looks like the spec itself fails to close the <p>
element in the example. I've gone ahead and revised my code:
<DIV>
Some text
<P>More text</p>
<span>An inline element</span>
</DIV>
And here is the new jsFiddle. It still seems to me like the span is acting like an inline-level box (i.e., it doesn't take up the entire width of the container.
Your example is broken. The span element is a child element of a paragraph.
Let us use this for the example instead:
<DIV>
Some text
<P>More text</p>
<span>An inline element</span>
<span>An inline element</span>
</DIV>
Here the div generates a principal block-level box.
That box contains an anonymous block-level box containing the free text, a principle block-level box generated by the paragraph, and another anonymous block-level box containing the two span elements.
Each span element generates an inline-level box within that last anonymous block-level box (which establishes the inline formatting context).