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.

Examples

Floats

1
2
3
4
5
<div class="ps-relative w-100 clearfix">
    <div class="float-none"></div>
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>
.float-none
.float-left
.float-right

Clears

1
2
3
4
5
<div class="ps-relative w-100 clearfix">
    <div class="float-none"></div>
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>
.float-left
.float-left
.clear-left
.float-right
.float-right
.clear-right
.float-left
.float-right
.clear-both