Clear

Utilities for controlling the wrapping of content around an element.

Use to position an element below any preceding left-floated elements.

Clearing right-floated elements

<img class="float-left ..." src="path/to/image.jpg">
<img class="float-right ..." src="path/to/image.jpg">

Use to position an element below all preceding floated elements.

Disabling applied clears

<img class="float-left ..." src="path/to/image.jpg">
<img class="float-right ..." src="path/to/image.jpg">
<p class="clear-none ...">Maybe we can live without libraries...</p>

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use to only apply the clear-none utility on hover.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

<p class="clear-left md:clear-none">

To learn more, check out the documentation on Responsive Design, and other media query modifiers.