Sections

Float and clearfix

Utilities for controlling the wrapping of content around an element.

Class Properties
.float-right float: right;
.float-left float: left;
.float-none float: none;
.clearfix @include clearfix();

Usage

Use .float-right to float an element to the right of its container.

Use .float-left to float an element to the left of its container.

Use .float-none to reset any floats that are applied to an element. This is the default value for the float property.

Use .clearfix to force an element to self-clear its children.

Variants

By default, no responsive or hover-state variants are generated for float utilities.

Responsive

To include responsive variants like .md:float-left, add "float" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "float",
);

Hover-state

To include hover-state variants like .hover:float-left, add "float" to the $hover-variants variable:

$hover-variants: (
  // ...
  "float",
);