Float and clearfix

Utilities for controlling the wrapping of content around an element.

In this article

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


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.


By default, only responsive variants are generated for float utilities.


To control the position of an element at a specific breakpoint, add a {screen}: prefix to any existing coordinate utility.

For example, use .md:float-left to apply the float-left utility at only medium screen sizes and above.


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

$hover-variants: (
  // ...

Questions or feedback about this article? Let us know