What is the CSS clear style and how is it used?

Question

What does the following do:

<div style="clear:both"></div>

and how is it used?

Answer 1

It will 'clear' any floated elements that appear above it in the HTML source. If you have floated elements within a container element, the container will have a height of 0 and the floated elements will 'spill out'. Clearing them will allow the container to assume the correct height.

See here for a much better explanation.

Answer 2

In case you have float elements, a clear:both will not wrap around them, but will be displayed after them. In a way, this resets floating.
clear:both is also useful for giving an element the height of its floating children - without it the element would be smaller than its children, which is unattractive.

A less common use it to fix IE6 problems, where it doesn't display the page properly. Sometimes elements are rendered behind the background color, and clear:both can fix it.

Answer 3

It's made to avoid float elements to keep on floating after this div. In my opinion using this is a bad idea and it's better to use a clearfix on the wrapping div containing the floating elements.