Float
Float an item within a layout flow.
Utility Modules
Float
Places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
.float-value | u-float(value) | @include u-float('left')@include u-float('right')@include u-float('none') |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| float | False | None | 0.02 KB | 0.1 KB |
The float utility classes have not been modified from the U.S. Web Design System (USWDS). Refer to the USWDS Float utility page for a complete listing of classes.
Clearfix
Clear any floated elements
Mixins and Functions
| Utility | Mixin | Example |
|---|---|---|
| .clearfix | clearfix | @include clearfix |
Utility Classes
| Module name | Are responsive modifiers turned on? | Active state modifiers | Gzip file size | Non-gzip file size |
|---|---|---|---|---|
| clearfix | False | None | 0.02 KB | 0.09 KB |
Example usage
Component Preview
.float-left .float-right
<div className="clearfix border-1px"><span class="float-left bg-secondary-light padding-2">.float-left</span><span class="float-right bg-secondary-light padding-2">.float-right</span></div>