🌊 Tailwind CSS - Floats

Float utilities in Tailwind CSS allow you to control how elements are positioned within their containing blocks. While flexbox and grid are now preferred for layout, floats remain useful for specific use cases.

The float utilities use CSS float property to position elements to the left or right of their container, with text and inline elements flowing around them.

Apply basic float utilities to position elements within their containers.

Apply different float behavior at different breakpoints for optimal layout across devices.

Combine float utilities with other Tailwind utilities to create common layout patterns like image galleries, sidebars, and pull quotes.

Use clear utilities to control how elements interact with floated elements above them. This prevents unwanted float behavior.

While floats are still useful, modern CSS provides better alternatives for most layout scenarios. Consider these alternatives when appropriate.

Create custom float utilities by extending the theme configuration with specific float values.

Common use cases for float utilities in web development.

Follow these best practices when working with float utilities.