Question

Here’s my doubt. If I float an inline element, since it’s display is automatically set to block, and since siblings of block level elements have to be themselves block level elements(anonymous ones if they must), shouldn’t in the example below, the first and second anonymous blocks be placed on separate lines as block level elements do by default?

<p>
   This will be the first anonymous block, <span style="float: left;">this will 
   be the span</span>, and this will be the second anonymous block.
</p>

See my demo: http://tinkerbin.com/5niDbThT

Notice that when I directly set the display to block on the span of the second paragraph, three different block level elements are created – just as I imagined it would happen when floating.

My guess is that floating is simply an exception that doesn’t trigger the effect. But you tell me ;). Thanks in advance!

Answer 1

Floats take the object out of the document flow which is why it shows up as it does.

Inline-block: “The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element”

You can also “clear” dom elements which pushes the element past the floated object. Most commonly used in a layout with a main area and a right/left column side by side.