O3 World Component Library

Clear Fix 

<!-- All markup in this file is FPO -->
<p>Without Clear-Fix</p>

<div class="style-guide__clear-fix-container">
    <img src="https://picsum.photos/300" class="clear-fix__image u-float-right" alt="Random Image">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</p>
</div>

<p class="u-cf">With Clear-Fix</p>

<div class="style-guide__clear-fix-container u-cf">
    <img src="https://picsum.photos/300" class="clear-fix__image u-float-right" alt="Random Image">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</p>
</div>
 
<!-- All markup in this file is FPO -->
<p>Without Clear-Fix</p>

<div class="style-guide__clear-fix-container">
  <img src="https://picsum.photos/300" class="clear-fix__image u-float-right" alt="Random Image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</p>
</div>

<p class="u-cf">With Clear-Fix</p>

<div class="style-guide__clear-fix-container u-cf">
  <img src="https://picsum.photos/300" class="clear-fix__image u-float-right" alt="Random Image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</p>
</div>
 
/* No context defined for this component. */

Usage

A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup.

The clearfix is implimented by way of the .u-cf classname.