Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

Float

Set an element's float property using the float utility.

You can use the clearfix utility class to automatically clear your floats.

Format: .ds-u-float--[left|right|none]

Responsive format: .ds-u-[breakpoint]-float--[left|right|none]

.ds-u-float--left

.ds-u-float--right

.ds-u-float--none

Clearfix

The clearfix utility can be applied to an element to clear floats around the element.

Format: .ds-u-clearfix

.ds-u-clearfix
Floated right
No clearfix
Floated right

Responsive float

Use a breakpoint prefix to change how an element is floated at specific breakpoints.

Scale: 0.22