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 does not need to be moved down to clear past floats.

Examples

Floats

<div class="ps-relative clearfix">
    <div class="float-none">…</div>
    <div class="float-left">…</div>
    <div class="float-right">…</div>
</div>

.float-none

.float-left

.float-right

Clears

<div class="ps-relative clearfix">
    <div class="float-left">…</div>
    <div class="float-left">…</div>
    <div class="clear-left">…</div>
</div>
<div class="ps-relative clearfix">
    <div class="float-right">…</div>
    <div class="float-right">…</div>
    <div class="clear-right">…</div>
</div>
<div class="ps-relative clearfix">
    <div class="float-left">…</div>
    <div class="float-right">…</div>
    <div class="clear-both">…</div>
</div>

.float-left

.clear-left

.float-right

.clear-right

.float-left

.float-right

.clear-both

Edit on GitHub