HTML and CSS Reference
In-Depth Information
Floating
Floating allows an element to be placed to the left or right of its containing block (which is
the nearest block-level ancestor element), with following content flowing around the element.
Any floated element automatically generates a block box, regardless of what type of box it
would generate if not floated. A floated element is placed according to the following rules:
▪ The left (or right) outer edge of a floated element may not be to the left (or right) of the
inner edge of its containing block.
▪ The left (or right) outer edge of a floated element must be to the right (or left) of the right
(left) outer edge of a left-floating (or right-floating) element that occurs earlier in the doc-
ument's source, unless the top of the later element is below the bottom of the former.
▪ The right outer edge of a left-floating element may not be to the right of the left outer edge
of any right-floating element to its right. The left outer edge of a right-floating element
may not be to the left of the right outer edge of any left-floating element to its left.
▪ A floating element's top may not be higher than the inner top of its containing block.
▪ A floating element's top may not be higher than the top of any earlier floating or block-
level element.
▪ A floating element's top may not be higher than the top of any line box with content that
precedes the floating element.
▪ A left (or right) floating element that has another floating element to its left (right) may
not have its right (left) outer edge to the right (left) of its containing block's right (left)
edge.
▪ A floating element must be placed as high as possible.
▪ A left-floating element must be put as far to the left as possible, and a right-floating ele-
ment as far to the right as possible. A higher position is preferred to one that is farther to
the right or left.
