Using .clearfix

Last updated on
19 September 2016

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%;
}