Float

Float utilities position an element to the left or right of its container, allowing inline content to wrap around it. For most layout needs, use Grid or Flexbox instead — floats are best suited for wrapping text around images or similar content-flow patterns.

Float classes

Class CSS value
.nys-float-left float: left
.nys-float-right float: right
.nys-float-none float: none
.nys-float-left

The New York State Department of Environmental Conservation manages the state's natural resources, from the Adirondack Park to Long Island's coastal waters. The department provides hunting and fishing licenses, oversees environmental permits, and monitors air and water quality across the state.

Copy Code
<div class="nys-float-left" style="margin-right: 1rem;">
  <img src="image.jpg" alt="Adirondack Park" width="200">
</div>
<p>The New York State Department of Environmental Conservation
manages the state's natural resources, from the Adirondack Park
to Long Island's coastal waters.</p>
.nys-float-right

The Division of Homeland Security and Emergency Services coordinates the state's response to natural disasters, severe weather events, and other emergencies. Residents can sign up for NY-Alert notifications to receive real-time updates.

Copy Code
<div class="nys-float-right" style="margin-left: 1rem;">
  <aside>Related links</aside>
</div>
<p>The Division of Homeland Security and Emergency Services
coordinates the state's response to natural disasters and
severe weather events.</p>

Clearfix

Use .nys-clearfix on a container to clear floated children and prevent layout collapse. This adds a ::after pseudo-element with clear: both.

Floated left
Floated right
Copy Code
<div class="nys-clearfix">
  <div class="nys-float-left">Floated left</div>
  <div class="nys-float-right">Floated right</div>
</div>
<!-- Container wraps around floated children -->

Responsive variants

All float utilities support responsive prefixes. See Responsive Utilities for breakpoint details.

<!-- Float left on tablet and wider, no float on mobile -->
<div class="nys-float-none nys-tablet:nys-float-left">
  Sidebar content
</div>

Edit this page on GitHub (Permissions required)

Last updated: June 17, 2026