Clearing floats with class="clearfix"

Last updated on
9 September 2016

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

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: "clearfix" ("clear-block" in version of Drupal prior to 7). This is an implementation of the easy clearing technique described at CSSCreator.

To use this, simply give the class 'clearfix' to the element that contains the floats.

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

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

Help improve this page

Page status: No known problems

You can: