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 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.