Clearing

Clearing is needed to reinstate the normal page flow and layout around floated elements.

Jump to a component:

Simple clearing

Add class="clear" to an element to clear simple floating layouts above it.

How to use for Simple clearing

Add in the HTML (see “development info”).

Development info for Simple clearing

Stylesheet location: /_source/styles/base/_global.scss

Element that needs to be cleared
<p class="clear"></p> <!-- can be any HTML element -->
Example of Simple clearing

I’m 50% width and floated left.

I’m 50% width, but not floating up next to my neighbor because I’m all clear!

Clearfix

Put a <div class="clearfix"> around a floated section of code to clear it – no need to add class="clear" to the next element in the hierarchy. clearfix is good for more complicated floating layouts. There’s also a clearfix mixin you can use in Sass.

How to use for Clearfix

Add in the HTML (see “development info”).

Development info for Clearfix

Stylesheet location: /_source/styles/base/_global.scss

<div class="clearfix">
  <div style="float:left; width:50%;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit pharetra lacinia.</p>
  </div>
  <div style="float:left; width:50%;">
    <p>Duis suscipit nunc nec luctus condimentum.</p>
  </div>
</div>
Example of Clearfix

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit pharetra lacinia.

Duis suscipit nunc nec luctus condimentum.

All clear, without class="clear". Without the clearfix above, I’d be floated in the little space below the second block.