Float utilities

Set a floating element on the fly.

The two standard float options are available as well as a clearfix, .float-left .float-right .clearfix and .clear.

// default config
float: (
  values: (
    'left',
    'right',
  ),
  clearfix: true, // activate clearfix classes
),

<img class="float-left mr-10" src="blue-square.jpg" width="100" height="100"/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="cell">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Clearfix

Clear the floating elements of a container

<div class="clearfix">
  <img class="float-left mr-10" src="blue-square.jpg" width="100" height="100"/>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<p class="cell">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Clear

Clear siblings floating elements

<img class="float-left mr-10" src="blue-square.jpg" width="100" height="100"/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="cell clear">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Add more, update data, set responsive values (Check the options)

// add .float-none
$ooLoop: ooAdd('float.values', 'none');

// set .float-left@sm .float-right@sm and float-none@sm
$ooLoop: ooSet('float.screens', 'sm');

In manual mode add the mixin Float().

Use Spacing utilities << >> Use Wrapper utilities