what exactly does floating do? and we did we clear to the left?

Hi there. When an element is floated, it is taken out of the normal document flow. That means that its position is not (without some additional css) affected by the position of sibling elements around it, and elements below the floated element will then flow around the floated element, as opposed to positioning immediately below it.

But a lot of times, we may use the float property simply to align an element left or right, and we don't want an adjacent element to flow around the floated element. That's why we use the clear property on the non-floated element. Using the clear property on the lower, adjacent, non-floated element pushes that element below the floated element, as if the floated element were still in the normal document flow.

This is a pretty decent demonstration: (http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear) . There are obviously other situations where you'd need it, but this at least demonstrates a basic scenario where you'd want to use floats/clear.

I hope that makes sense!

Clearing makes sure that the element you place next will go below any floated elements.

Floated elements do not get reserved space like ordinary elements, so without clearing, non-flowed elements can visually overlap or be totally obscured.