CSS Floats & Clears

Floats

While absolute elements ignore the normal flow of the page, floated elements remain a part of the flow and takes into account the adjacent elements.

The float CSS property positions an element on the left or right side of its containing block or another floated element. This effect can be compared to “text-wrap in a print layout, in which text and other inline elements wrap around the image (floating element).

Values include:

1. Float: none (default; ensures element will not float)
2. Float: left (floats elements to left of container)
3. Float: right (floats elements to right of container)
4. Float: inherit (inherits float direction of its parent)

When there are multiple floating elements in a container, the float property stacks the pertaining element adjacent to the previous floated element. As pictured above, left-floated elements stack from left to right and right-floated elements stack from right to left. When they’ve stacked across the entire width of the container, any element that comes after the last in line would wrap to the next line.

Clearing floats

Floating elements with different heights wrap around each other and when added to a new line, they take whatever space is available beneath the previous line.

Suppose you want to separate the footer from the main contents so that it takes up its own full width. By setting the clear property on the footer element, the footer will stand alone beneath the other floated elements, depending on the values below.

Clear values include:

1. Clear: none; (default; not moved down to clear past floating elements)
2. Clear: left; (element moved down to clear past left floating elements)
3. Clear: right; (element moved down to clear past right floating elements)
4. Clear: both; (element moved down to clear past left and right floating elements)

Methods for Clearing Floats

1. Float the container itself (set the width to 100%)
2. Add an empty div tag with the clear property
3. Set the overflow: hidden property to the container