Xmeter Style Guide

6.3 #Helpers.Clearfix Clearfix

Toggle example guides Toggle HTML markup

The Clearfix Helper creates a line break after an element in order to push subsequent content below the container. This could be a container of floats, or it could simply be an inline list item. Use this as an alternative to the br element.

The Clearfix Helper is used in the classical sense in the first example below (to clear a float). In the second example, the Clearfix Helper creates a line break after the 2nd inline item.

The last example shows an alternative to marking up postal addresses. Instead of adding br elements to create line breaks in postal addresses—the traditional approach—you may wrap each line of the address with spans using the Clearfix Helper. This approach may be easier if the spans are already present, for example, from microdata markup.

author
Chris Harvey
updated
Example
gravity
supernova
spacetime black hole singularity
  • spacetime
  • black hole
  • singularity
  • neutron star

The White House 1600 Pennsylvania Ave NW Washington, DC 20500

Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Clearfix.css"/-->
<div class="h-Clearfix">
  <div style="font-weight: 700; float:  left;">gravity</div>
  <div style="font-weight: 700; float: right;">supernova</div>
</div>
<div>spacetime black hole singularity</div>
<ul>
  <li class="h-Inline">spacetime </li>
  <li class="h-Inline h-Clearfix">black hole </li>
  <li class="h-Inline">singularity </li>
  <li class="h-Inline">neutron star </li>
</ul>
<p>
  <span class="h-Clearfix">The White House</span>
  <span class="h-Clearfix">1600 Pennsylvania Ave NW</span>
  <span class="h-Clearfix">Washington, DC 20500</span>
</p>
Source: _h-Clearfix.less, line 7