Sections

Floats

Float and clear atomic classes allow you to change how an element is positioned within the layout. These should be used when possible to help create consistency.

Classes

Class

Output

Definition

.float-left

float: left;

Indicates that the element must float on the left side of the parent container.

.float-right

float: right;

Indicates that the element must float on the right side of the parent container.

.float-none

float: none;

Indicates that the element must not float.

.clearfix

.clearfix();

This class calls the .clearfix(); mixin, which fixes a layout bug. Floating an object takes it out of the DOM order. When all child itmes within a parent container contain a float property then, the parent container will collapse. The .clearfix class forces the parent container to not collapse.

.clear-left

clear: left;

Indicates that the element must be moved down to clear past left floats.

.clear-right

clear: right;

Indicates that the element must be moved down to clear past right floats.

.clear-both

clear: both;

Indicates that the element must be moved down to clear past left and right floats.

.clear-none

clear: none;

Indicates that the element is not moved to clear past floating elements.