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.