Note: The answer to this question was originally posted here, by forum member vtjustinb.
A: Here's an example of a float-clearing scenario:
Code:
<div id="wrapper">
<div id="left-nav">
....
</div>
<div id="content">
....
</div>
</div>
Now let's say that we give #wrapper a background color of red, float #left-nav left, float #content right, and adjust the widths, padding, and/or margins to fit.
We view our page expecting to see #left-nav and #content beside each other, which they are, but there's no red background? Why?
Well, this has to do with "normal flow," which is the default positioning the browser renders elements. If we didn't float #left-nav and #content they'd never be able to be beside each other—by default they're block-level elements and render on top of each other.
By floating the two inner divs, we take them out of normal flow which allows them to position beside each other. This is the effect we want, but the problem is now since both of #wrapper's content divs are floated there's technically nothing contained inside of it in normal flow. This means that when #wrapper goes to compute its height it thinks its height is zero, because there's nothing inside of it in normal flow.
clear is a CSS property that handles this problem. When you clear floats, it forces the containing divs to expand its size to include the size of its floats. You can accomplish this by the following:
Code:
<div id="wrapper">
<div id="left-nav">
....
</div>
<div id="content">
....
</div>
<div style="clear: both;"><!-- clear floats --></div>
</div>
Now, because the two floats are cleared (you can clear left, right, or both) #wrapper will expand its height to include the height of #left-nav and #content, and because #wrapper has a height now the red background is shown.
This ascii drawing describes this phenomenon visually:
Without clearing:
Code:
+--(#wrapper)---------------------------------+
| +-----------+ +--------------------+ |
+---| |----| |---+
| | | |
| | | |
| | | |
| | | |
| #left-nav | | #content |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+-----------+ +--------------------+
With clearing:
Code:
+--(#wrapper)---------------------------------+
| +-----------+ +--------------------+ |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | #left-nav | | #content | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +-----------+ +--------------------+ |
| |
| +---clear: both-----------------------+ |
| |
+---------------------------------------------+
When you specify a specific direction on the clear (such as left, or right), it only considers elements that are floated in that direction. In the above example, if the #left-nav was shorter than #content and you cleared left, then #wrapper would only expand to cover #left-nav:
Code:
+--(#wrapper)---------------------------------+
| +-----------+ +--------------------+ |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | #left-nav | | #content | |
| | | | | |
| | | | | |
| +-----------+ | | |
+--------------------| |---+
| |
| |
| |
| |
+--------------------+
+---clear: left-----------------------+
There are also methods to clear floats without adding additional markup to the page. One popular method is described here:
http://www.positioniseverything.net/easyclearing.html
Before you post, read our: 
