Skip to main content

Float

Position an element to the left or right within its container so that other elements can flow around it


About display: flow-root

When elements are floated, the parent container's height can collapse to zero because the parent no longer “sees” the floated elements. Applying display: flow-root to the parent container creates a new block formatting context so it encloses its floated children. This is a clean alternative to the clearfix hack currently used by USWDS.

Properties

No Float

.float-none

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

<section>
  <div class="border-2px border-dashed margin-bottom-10">
    <div class="border-1px square-15 bg-base-lightest margin-2 float-none" style="display: flex; align-items: center; justify-content: center">.float-none</div>
    <p class="margin-x-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  </div>
</section>

Float without "display: flow-root"

.float-left

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

.float-right

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

<section>
  <div class="border-2px border-dashed margin-bottom-10">
    <div class="border-1px square-15 bg-base-lightest margin-2 float-left" style="display: flex; align-items: center; justify-content: center">.float-left</div>
    <p class="margin-x-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  </div>

  <div class="border-2px border-dashed margin-bottom-10">
    <div class="border-1px square-15 bg-base-lightest margin-2 float-right" style="display: flex; align-items: center; justify-content: center">.float-right</div>
    <p class="margin-x-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  </div>
</section>

Float with "display: flow-root"

.float-left

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

.float-right

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

<section>
  <div class="border-2px border-dashed margin-bottom-10" style="display: flow-root">
    <div class="border-1px square-15 bg-base-lightest margin-2 float-left" style="display: flex; align-items: center; justify-content: center">.float-left</div>
    <p class="margin-x-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  </div>

  <div class="border-2px border-dashed margin-bottom-10" style="display: flow-root">
    <div class="border-1px square-15 bg-base-lightest margin-2 float-right" style="display: flex; align-items: center; justify-content: center">.float-right</div>
    <p class="margin-x-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  </div>
</section>

Guidance

  • Common use case: A classic use of Float is wrapping text around an image.
  • Preventing collapse: To fix the parent container collapse, you can use display: flow-root to style the parent container. This is a modern alternative to the older "Clearfix" hack that USWDS still uses.
  • Allowing overflow: Floating without display: flow-root is sometimes useful when you want content, such as a tooltip, to intentionally overflow its parent container.
  • To stop floating: Use .float-none if an element has inherited a .float-left or .float-right from a parent element or a general CSS rule to return the element to its default, non-floating behavior within the normal document flow.
  • Alternatives: For more complex and robust layouts, modern web design practices prefer using Flexbox instead of Float.

Utility classes

Utility classes may be included in your HTML or applied using Utility classes in your Sass.

Utility Example Code
.float-token .float-left class=("float-left"))

  • Use single-quoted strings in Utility classes.
  • Do not quote numbers or px values. With the exception of half (05), values like '105', and '205' should be treated as strings.
  • String tokens for half values (like 05) and negative values (like neg-1) may also be written with their unquoted number token equivalent: 0.5, 1.5, 2.5, -1, -1.5, etc.
  • If multiple utilities share the same prefix (ex: .text- or .flex-) or a single utility accepts multiple kinds of values (eg: .border accepts both border weight and border color), their shared mixin can accept multiple comma-separated values:
    • u-text('primary-darkest', 'no-underline', 'bold')
    • u-border-top(2px, 'accent-warm')
  • Output any utility mixin as !important by appending !important to the mixin’s argument list:
    • u-bg('red-warm-50v', !important)

Utility variants

More information about utility variants can be viewed on the utility variants page. Responsive and state variants are listed as true when they are available for use.

Responsive variants

You can apply different styles at different responsive breakpoints using responsive utilities. Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).

Utility variable Responsive
$float-settings false

State variants

You can apply different styles for different state variants using state utilities. Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).

Utility variable Active Focus Hover Visited
$float-settings false false false false
Looking for U.S. government information and services?
Visit USA.gov