Float

Float an item within a layout flow.

Utility Modules

Float

Places an element on the left or right side of its container, allowing text and inline elements to wrap around it.

Mixins and Functions

Utility	Mixin	Example
.float-`value`	u-float(`value`)	@include u-float('left')@include u-float('right')@include u-float('none')

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
float	False	None	0.02 KB	0.1 KB

.float-none

.float-left

.float-right

<div class="clearfix">
  <p class="float-none">
    <span>.float-none</span>
  </p>
</div>
<div class="clearfix">
  <p class="float-left">
    <span>.float-left</span>
  </p>
</div>
<div class="clearfix">
  <p class="float-right">
    <span>.float-right</span>
  </p>
</div>

Clearfix

Clear any floated elements

Mixins and Functions

Utility	Mixin	Example
.clearfix	clearfix	@include clearfix

Utility Classes

Utility module usage information
Module name	Are responsive modifiers turned on?	Active state modifiers	Gzip file size	Non-gzip file size
clearfix	False	None	0.02 KB	0.09 KB

.float-left.float-right

Example usage

<div class="clearfix border-1px">
  <span class="float-left">
    .float-left
  </span>
  <span class="float-right">
    .float-right
  </span>
</div>