Floats are an important component of many of today's most popular CSS libraries, yet many developers don't really understand what they do. Here is a brief explanation:

1. Floats remove an item from the "flow" of the document's inherent layout. This means that they can be used to push an element from where it would normally be.
2. For inline elements (labels, inputs, spans, imgs, etc), floats are often used to allow the developer to set CSS attributes such as width and margins that can ordinarily only be set on block elements.

This second usage is probably actually the most common, but it can get developers into trouble. One solution is to use display:inline-block; on inline elements for which you want to set block attributes like width and margin. The downside of this approach is that as of this writing, Firefox does not support display:inline-block on inline elements. However, I've heard reports that the next release of Firefox will support it, which will open up a lot of options for developers who have been forced to overuse floats in order to get the layouts that they want.