Tailwind CSS - Floats

Tailwind CSS: The Float Utility

The float utility in Tailwind CSS is used to control how an element is positioned horizontally, allowing text and inline elements to wrap around it. While float was historically used for creating entire page layouts, its modern use is much more specific.

When to Use float in Modern Development

In a modern workflow dominated by Flexbox and CSS Grid, the primary and recommended use case for float is to wrap text around an image or media element within a block of content, like an article.

Common Mistake: Using Float for Layout

Avoid using float for building main page layouts, sidebars, or component grids. These tasks are better, more reliably, and more predictably handled by modern layout systems.

• For 1-dimensional layouts (rows or columns): Use Flexbox (flex, justify-*, items-*).
• For 2-dimensional layouts (rows AND columns): Use CSS Grid (grid, grid-cols-*, gap-*).

Float Utilities and A Proper Example

Here are the available float classes and a correct, modern example of their usage.

Class	CSS Properties
float-right	float: right;
float-left	float: left;
float-none	float: none;
float-start	float: inline-start; (Logical property, respects text direction)
float-end	float: inline-end; (Logical property, respects text direction)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Float Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* For demo purposes: a placeholder image service */
    .placeholder-img { content: url('https://picsum.photos/seed/float/200/150'); }
  </style>
</head>
<body class="bg-slate-50 text-slate-700 p-8 font-serif">

  <div class="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow">
    <h1 class="text-3xl font-bold text-slate-900 mb-4">The Art of Text Wrapping</h1>

    <!-- The 'flow-root' class is the modern way to contain floats, replacing older 'clearfix' hacks. -->
    <div class="flow-root">
      <img
        src="#"
        alt="An abstract image floating to the left of the text"
        class="placeholder-img w-48 h-auto rounded-md float-left mr-6 mb-2" />

      <p class="text-lg leading-relaxed">
        This is a perfect example of using `float-left`. The image is pulled to the left, and the surrounding text gracefully wraps around it. Notice the use of margin utilities (`mr-6 mb-2`) to create space between the image and the text, preventing them from touching. This is the intended and powerful use case for the float property in contemporary web design. It's ideal for articles, blog posts, and descriptive content where media and text need to coexist harmoniously within the same content block.
      </p>
    </div>

    <p class="text-lg leading-relaxed mt-4">
      Once the floated element's vertical space is cleared, subsequent content continues normally below it. For complex page structures, however, developers should turn to Flexbox or CSS Grid, which offer superior control over alignment, spacing, and responsiveness without the side effects associated with floats, such as collapsing parent containers.
    </p>
  </div>

</body>
</html>

Clearing Floats with flow-root

When you use float, the parent container may collapse in height because it no longer contains the floated element. The old solution was a CSS hack called a “clearfix”. The modern solution is much simpler: apply the flow-root utility to the parent element. This creates a new block formatting context, which correctly contains any child floats.