CSS Positioning

There are a few things you should note regarding floated boxes. For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it. As such, floated boxes are always treated as block boxes, even if they are defined using inline elements.

Second, unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it.

Finally, a floated box can overlap block-level boxes adjacent to it in the normal flow. Here's an example where the floated element has much more text than its containing block. Another paragraph has been added to the previous code to demonstrate.

<p>
  <span style="float:right;width:40%;">
    content content content content content content content content
    content content content content content content content content...
  </span>
  content content content content...
</p>

<p>
content content content content
content content content content...
</p>

Note that the floated box overlaps the borders of both its parent box and one following it (although the text in the second block flows around the float). This can be avoided using the clear property.

Setting clear:right; on the second box moves it down to just below the floated box. Here's an example using code similar to the last.

<p>
  <span style="float:right;width:40%;">
    content content content content content content content content
    content content content content content content content content...
  </span>
  content content content content...
</p>

<p style="clear:right;">
content content content content
content content content content...
</p>

This causes the top margin of the second box to be increased just enough to place the second paragraph's border and content just below the floated box.

The float still overlaps the top box (the paragraph that contains it) but that's because the example was purposely set up to do that, using a large amount of content in the floated element compared to the surrounding content.

Normally this would be avoided by placing the floated outside of the paragraph and letting both paragraphs flow around it.

<span style="float:right;width:30%;">
  content content content content content content content content...
</span>

<p>content content content content...</p>

<p>content content content content...</p>

The clear property can be set to one of left, right, both, none or inherit. It only has meaning for block-level elements.

Adjacent Floats

When two or more adjacent elements are floated, their tops are positioned on the same line (side by side) if there is sufficient horizontal space to accommodate them. If not, the latter element(s) are moved down to a position where there is sufficient space, always aligned with a line box.

It should be noted that this downward shift may also occur for a single floated element if it's too wide to fit within its initial position with adjacent content.

Prev | Next