Last updated June 26, 2011. Created by joachim on February 23, 2009.
Edited by taslett, lisarex, NonProfit. Log in to edit this page.
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" (5.x & 6.x) or "clearfix" in (7.x). This is an implementation of the easy clearing technique described at CSSCreator.
To use this, simply give the class 'clear-block' or 'clearfix' 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"' or 'class="clearfix"' on the containing UL.
There are many examples of this in core Drupal, such as node links.