| 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, only responsive variants are generated for float utilities.
Responsive
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.
Hover-state
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: (
// ...
"float",
);