Using .clearfix

Last updated on
19 September 2016

This is documentation for Drupal 7, which is no longer supported. Learn more and find resources for Drupal 7 sites

Drupal 6's “clear-block” class was a Drupalism for functionality which is better known by the CSS Community as “clearfix.” Furthermore, using the “block” term was confusing as it is not dependent on Drupal’s block system. The clear-block class has been renamed to clearfix in Drupal 7.

7.x and 8.x

<div class="clearfix">

Here's what Drupal provides by default from system.base.css:

/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}

Help improve this page

Page status: No known problems

You can: