Tailwind CSS - Clear

The clear utility in Tailwind CSS is used to control the wrapping of content around elements that have been floated using the float-* utilities.

A Note on Modern Layouts

Important: The float and clear properties are legacy tools from an earlier era of CSS. For building modern page and component layouts, you should almost always use Flexbox (flex) or CSS Grid (grid). These modern tools are more powerful, predictable, and easier to manage.

The primary, valid use case for float today is for wrapping text around an image or element, much like in a newspaper or magazine article.

Clear Utility Classes

When you must use float, the clear utilities help you manage the layout flow.

Class	CSS Properties	Description
`clear-left`	`clear: left;`	Pushes the element below any preceding left-floated elements.
`clear-right`	`clear: right;`	Pushes the element below any preceding right-floated elements.
`clear-both`	`clear: both;`	Pushes the element below all preceding floated elements on both sides.
`clear-none`	`clear: none;`	The default value. The element is not pushed down.
`clear-start` / `clear-end`	`clear: inline-start;` / `clear: inline-end;`	Logical properties that clear based on text direction (LTR/RTL).

Example: The Correct Use of Float and Clear

This example demonstrates the intended use case for float: wrapping text around an image. The paragraph following the floated image uses clear-both to ensure it starts on a new line after the floated content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Clear Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-white font-serif text-slate-700">

  <div class="max-w-prose mx-auto">
    <h1 class="text-3xl font-bold text-slate-900 mb-4">A Story of Layouts</h1>

    <img src="https://placehold.co/150x200/a78bfa/ffffff" alt="A placeholder image" class="float-left mr-4 mb-2 rounded-md shadow-sm">

    <p class="leading-relaxed">
      This text gracefully wraps around the image because the image has the `float-left` utility. This is the primary modern use case for the float property. The margin utilities `mr-4` and `mb-2` create some breathing room between the image and the surrounding text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
    </p>

    <p class="clear-both pt-4 text-sm text-slate-500">
      This paragraph uses `clear-both`. Notice how it does not wrap and instead starts on a fresh line below the floated image and the text beside it. The `pt-4` adds some top padding for spacing.
    </p>
  </div>

</body>
</html>

Modern Alternative: Using Flexbox

For nearly all other column-based layouts, Flexbox is superior. Here’s how you would create a simple two-column layout without using floats.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Layout with Flexbox</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-slate-50">

  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold text-slate-800 mb-4">Two-Column Layout with Flexbox</h2>

    <div class="flex flex-col md:flex-row gap-6 bg-white p-6 rounded-lg shadow">
      <div class="md:w-1/3 bg-indigo-100 p-4 rounded">
        <h3 class="font-bold text-indigo-800">Sidebar</h3>
        <p class="text-indigo-700 text-sm">This is the first column.</p>
      </div>
      <div class="md:w-2/3 bg-sky-100 p-4 rounded">
        <h3 class="font-bold text-sky-800">Main Content</h3>
        <p class="text-sky-700 text-sm">This is the second column. Using Flexbox (`flex`, `md:flex-row`, `gap-6`) is more robust and predictable than floats for this kind of layout.</p>
      </div>
    </div>
  </div>

</body>
</html>