Floats and Clears

The float property specifies whether or not a box (or an element) should float; essentially, it determines whether text will be wrapped around the element.

Note that "absolutely positioned" elements ignore the float property as they are removed from the normal document flow.

Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning.

There are four valid values for the float property. left and right float elements those directions, respectively. none (the default) ensures the element will not float and inherit which will assume the float value from that element's parent element.

Clear

All elements will float next to floated items until they are specifically cleared. Think about the text on the page.

Floats to create multicolumn layouts

If our element sizes are variable or dynamic, we can use floats to allow text/other elements to wrap around the floated element. This can be done by creating containers and having them all float to the left. See the example below.

See the Pen Common Page Layout v1 (floats) by General Assembly (@ga-sg) on CodePen.

Note that our text is aware that our div wants to be as left as possible and kindly wraps it in a nice text hug.

Using inline-block to create multicolumn layouts

It is also possible to recreate the same multicolumn layout above using display: inline-block; without using floats.

See the Pen Common Page Layout v2 (inline-block) by General Assembly (@ga-sg) on CodePen.

Floats with clears

While floats make other elements aware of their location and get text hugs, clears make other elements aware and are told not to touch.

clear is saying "I'm not sure how much space I'm going to take but whatever it is clear off my right side" so our text respects its wishes and drops to the line below.