Clearing floats with class="clear-block"

Many HTML layouts require floats to be cleared so they don't interfere with content below them. This can be done by setting the 'clear' property on the subsequent element, but in flexible situations where the next element is not known, this is traditionally done with an empty DIV element with the clear property.

There is however a simpler way to do this. Drupal's system stylesheet has a very useful class: "clear-block". This is an implementation of the easy clearing technique described at Position is everything.

To use this, simply give the class 'clear-block' to the element that contains the floats.

So for example, if you have a gallery of floated images that are LIs, put 'class="clear-block"' on the containing UL.

There are many examples of this in core Drupal, such as node links.