CSS Positioning - Float

Floats

Floating is achieved by setting the float property on an element's style to either left or right. Special rules apply to floated elements.

When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block's padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side.

The illustration below shows the result of code like the following, where a floated element is defined as part of inline text (margin, border and padding styles have been omitted for brevity).

<div class="marginBlock">
  <div class="containingBlock">
    <div class="contentBlock">
      <div class="marginBlock" style="float:right;width:40%;">
        <div class="containingBlock">
          <div class="contentBlock">
          content content content content
          </div>
        </div>
      </div>
      content content content content content content content content
      content content content content content content content content
      content content content content content content content content
      content content content content content content content content
      content content content content content content content content
      content content content content content content content content
      content content content content
    </div>
  </div>
</div>

The float property can be set to one of left, right, none or inherit.