We use this for 2 reasons. 1, to clear the floating so that elements later on which also use floating are reset to the far left/right. 2, to automatically size the parent container's height to the height of all floated elements within it.

Clear has to do with what the element does to the floating chaing *before* it's rendered, *not after*. Adding clear:both to the last element in a series of floating elements will result in that element breaking the floating chain and then being rendered at the far left/right below the other elements.

By using <div style="clear:both"></div> we can clear floating and get the parent container to receive the correct height.

I hope this clears this up.