These are the rules that guide behavior of floating elements:

  1. The left edge of a left floated box may not be to the left of the left edge of its containing block. Analogical rules are in place for the right floated box.
  2. If the current box is left floating and there are any left floating boxes generated by elements earlier in the same document, then for each of the earlier boxes, the left edge of the current box must be the right edge of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogical rules are in place for the right floated box.
  3. The right outer edge of a left floating box may not be to the right edge of the left outer edge of any right floating box that is next to it. Analogical rules are in place for the right floated box.
  4. A floating box's outer top may not be higher that the top of its containing block. When the float occurs between two collapsed margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow.
  5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
  6. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
  7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
  8. A floating box must be placed as high as possible.
  9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

 

›› go to examples ››