Elements following a floated element will wrap around the floated element. To disable wrapping, you can apply the “clear” property to these following elements. The standard method is to place a complete “cleared” element last in the container :
To clear CSS floats without this extra markup you can use the following techniques :
- Float the container as well
- Use overflow: hidden on the container
- Generate content using the :after CSS pseudo-class
A very detailed tutorial about Floats has been published by Vitaly Friedman, editor-in-chief of the Smashing Magazine.
Other useful tutorials are :