Browser Support

Menu

Tailwind CSS Clear

Whenever you use floating elements, surrounding content or containers may behave unpredictably if the float is not cleared. In CSS, the clear property is used to push an element below the floated item to ensure subsequent elements do not wrap awkwardly around it.

Tailwind provides a set of utilities that map to these standard clearing behaviors. In this guide, we will examine how Tailwind implements clear-* utilities, how to incorporate them in your projects, and how to use them in responsive and state-based scenarios:

Class	Properties	Example
`clear-start`	`clear: inline-start;`	`<div className="clear-start"></div>`
`clear-end`	`clear: inline-end;`	`<div className="clear-end"></div>`
`clear-left`	`clear: left;`	`<div className="clear-left"></div>`
`clear-right`	`clear: right;`	`<div className="clear-right"></div>`
`clear-both`	`clear: both;`	`<div className="clear-both"></div>`
`clear-none`	`clear: none;`	`<div className="clear-none"></div>`

Overview of Clear

Left Float Clearing

To position an element below a left floated element, use the clear-left utility:

This is a live editor. Play around with it!

export default function ClearLeft() {
  return (
    <div className="h-screen w-screen bg-gray-50 p-6">
      {/* Floated image to the left */}
      <img 
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae" 
        className="float-left w-48 mr-4 mb-4"
      />
      <h1 className="text-2xl font-semibold mb-4">
        Article Header
      </h1>
      <p className="clear-left mb-4">
        Notice that the header wraps around the image on the right, but this paragraph comes below the image. This is because of the "clear-left".
      </p>
    </div>
  );
}

Right Float Clearing

To position an element below a right floated element, use the clear-right utility:

This is a live editor. Play around with it!

export default function ClearRight() {
  return (
    <div className="h-screen w-screen bg-gray-50 p-6">
      {/* Floated image to the right */}
      <img 
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae" 
        className="float-right w-48 ml-4 mb-4"
      />
      <h1 className="text-2xl font-semibold mb-4">
        Article Header
      </h1>
      <p className="clear-right mb-4">
        Notice that the header wraps around the image on the left, but this paragraph comes below the image. This is because of the "clear-right".
      </p>
    </div>
  );
}

All Float Clearing

Sometimes, you may have a complex layout where multiple objects are floated either left or right (or both). In such cases, you often need an element to clear any type of float. Tailwind’s clear-both accomplishes this by applying clear: both;—forcing the element to drop below floats on either side.

This is a live editor. Play around with it!

export default function ClearBoth() {
  return (
    <div className="h-screen w-screen bg-gray-50 p-6">
      {/* Floated images to the left and right */}
      <img 
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae" 
        className="float-left w-20 ml-4 mb-4"
      />
      <img 
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae" 
        className="float-right w-32 ml-4 mb-4"
      />
      <p className="clear-both mb-4">
        Notice that the text comes below the left and right floated images. This is because of the "clear-both".
      </p>
    </div>
  );
}

Disabling the Clear

While you may frequently want to apply a clear, there are instances where you wish to explicitly remove it. Tailwind provides clear-none corresponding to clear: none;, which you can use to disable any clear behavior for that particular element.

This is a live editor. Play around with it!

export default function ClearNone() {
  return (
    <div className="h-screen w-screen bg-gray-50 p-6">
      {/* Floated images to the left and right */}
      <img 
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae" 
        className="float-left w-20 ml-4 mb-4"
      />
      <img 
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae" 
        className="float-right w-32 ml-4 mb-4"
      />
      <p className="clear-none mb-4">
        Notice that the text comes between the left and right floated images. This is because "clear-none" ensures no clearing behaviour.
      </p>
    </div>
  );
}

Logically Clearing Elements

CSS offers logical properties for clear to support different writing modes and languages. Instead of referencing physical sides (left, right), we can use inline-start or inline-end.

In Tailwind CSS, you can use clear-start and clear-end utilities for inline-start and inline-end properties:

This is a live editor. Play around with it!

export default function LogicalClear() {
  return (
    <div dir="rtl" className="h-screen w-screen bg-gray-50 p-6">
      <img 
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Logical Start Floated"
        className="float-start w-48 ml-4 mb-2"
      />
      <p className="clear-start">
        The usage of logical properties is especially advantageous in projects requiring multilingual or multi-directional support, as it removes the reliance on hard-coded left or right references.
      </p>
    </div>
  );
}

States and Responsiveness

Clearing strategies sometimes need to adapt to user interactions (hover or focus) or change based on different screen sizes (via breakpoints). Tailwind supports these through its state and responsive modifiers. You can use the same clearing classes but prepend them with these prefixes.

Hover and Focus States

Tailwind provides state modifiers to apply properties only when certain states are active. Use the hover and focus modifiers to apply clear on states like hover or focus.

This is a live editor. Play around with it!

export default function HoverFocusStatesDemo() {
  return (
    <div className="h-screen w-screen bg-white p-6">
      <div className="float-left w-1/2 bg-gray-200 p-4 mr-4">
        <p>
          This section remains floated left. We'll test how adjacent elements respond on hover.
        </p>
      </div>
      <p tabindex="0" className="clear-none focus:clear-left mt-4">
        When this text is not focused, no clear is applied (clear: none).
        On focus, it shifts below the floated section (clear: left).
      </p>
    </div>
  );
}

Breakpoint Modifiers

If your layout requires different clearing behaviors at different screen sizes, Tailwind’s breakpoint modifiers let you prefix clearing classes with sm:, md:, lg:, xl:, or any custom breakpoints you define in your configuration. This ensures the float clearing strategy is fluid and responsive.

This is a live editor. Play around with it!

export default function BreakpointModifiersDemo() {
  return (
    <div className="h-screen w-screen bg-white p-6">
      <div className="float-left w-1/2 bg-gray-200 p-4 mr-4">
        <p>
          This section remains floated left. We'll test how adjacent elements respond on hover.
        </p>
      </div>
      <p tabindex="0" className="sm:clear-left mt-4">
        On screens below "sm", this text will come on the right of the floated element. On screens "sm" and above, it will be positioned below the floated element because of "sm:clear-left".
      </p>
    </div>
  );
}

Real World Examples

Image Gallery with Text Wrap

A responsive image gallery where text wraps around images using clear property.

This is a live editor. Play around with it!

const ImageGalleryWithText = () => {
  const data = [
    {
      id: 1,
      src: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
      alt: "Laptop with coffee",
      title: "Modern Workspace",
      description: "A minimalist workspace setup with natural lighting"
    },
    {
      id: 2,
      src: "https://images.unsplash.com/photo-1516542076529-1ea3854896f2",
      alt: "Plant on desk",
      title: "Green Office",
      description: "Indoor plants bring life to any workspace"
    },
    {
      id: 3,
      src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f",
      alt: "Team meeting",
      title: "Collaboration",
      description: "Team discussing project details"
    },
    {
      id: 4,
      src: "https://images.unsplash.com/photo-1497215728101-856f4ea42174",
      alt: "Office setup",
      title: "Modern Office",
      description: "Contemporary office design"
    },
    {
      id: 5,
      src: "https://images.unsplash.com/photo-1497366216548-37526070297c",
      alt: "Coffee break",
      title: "Break Time",
      description: "Taking a moment to recharge"
    },
    {
      id: 6,
      src: "https://images.unsplash.com/photo-1523240795612-9a054b0db644",
      alt: "Desk accessories",
      title: "Organized Space",
      description: "Well-arranged desk essentials"
    }
  ];

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold mb-6">Workspace Gallery</h2>
      <div className="space-y-8">
        {data.map((item) => (
          <div key={item.id} className="clear-both">
            <img
              src={item.src}
              alt={item.alt}
              className="float-left mr-4 mb-4 w-48 h-48 object-cover rounded"
            />
            <div>
              <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
              <p className="text-gray-600">{item.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ImageGalleryWithText;

Blog Post Layout with Side Notes

A blog post layout where side notes float to the right while maintaining content flow.

This is a live editor. Play around with it!

export default function BlogPost() {
  const post = {
    title: "Understanding Modern Web Development",
    content: [
      {
        id: 1,
        type: "paragraph",
        text: "Modern web development has evolved significantly over the past decade..."
      },
      {
        id: 2,
        type: "note",
        text: "React was first released in 2013",
        src: "https://images.unsplash.com/photo-1633356122544-f134324a6cee",
        alt: "React logo illustration"
      },
      {
        id: 3,
        type: "paragraph",
        text: "Frontend frameworks have revolutionized how we build web applications..."
      },
      {
        id: 4,
        type: "note",
        text: "Vue.js gained popularity in 2016",
        src: "https://images.unsplash.com/photo-1614812513172-567d2fe96a75",
        alt: "Vue.js logo illustration"
      },
      {
        id: 5,
        type: "paragraph",
        text: "The rise of component-based architecture changed everything..."
      },
      {
        id: 6,
        type: "note",
        text: "Components improve code reusability",
        src: "https://images.unsplash.com/photo-1587620962725-abab7fe55159",
        alt: "Code editor screenshot"
      }
    ]
  };

  return (
    <article className="p-6 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold mb-6">{post.title}</h1>
      <div className="relative">
        {post.content.map(item => (
          <div key={item.id}>
            {item.type === "paragraph" ? (
              <p className="mb-4 text-gray-800">{item.text}</p>
            ) : (
              <aside className="float-right ml-4 w-48 bg-gray-50 p-3 rounded-lg mb-4">
                <img 
                  src={item.src} 
                  alt={item.alt} 
                  className="w-full h-32 object-cover rounded-md mb-2"
                />
                <p className="text-sm text-gray-600">{item.text}</p>
              </aside>
            )}
            {item.type === "paragraph" && <div className="clear-right" />}
          </div>
        ))}
      </div>
    </article>
  );
}

Magazine Article Layout

A magazine-style article layout with floating pull quotes and images.

This is a live editor. Play around with it!

export default function MagazineArticle() {
  const articleData = {
    title: "The Future of Sustainable Design",
    author: "Alex Rivera",
    content: [
      {
        type: "text",
        content: "Introduction paragraph..."
      },
      {
        type: "quote",
        content: "Design is not just what it looks like. Design is how it works.",
        author: "Steve Jobs",
        float: "right"
      },
      {
        type: "image",
        src: "https://images.unsplash.com/photo-1493397212122-2b85dda8106b",
        alt: "Sustainable architecture example",
        caption: "Award-winning eco-friendly building",
        float: "left"
      }
      // Add more content blocks...
    ]
  };

  return (
    <article className="max-w-4xl mx-auto p-4">
      <h1 className="text-4xl font-bold mb-6">{articleData.title}</h1>
      <p className="text-xl text-gray-600 mb-8">By {articleData.author}</p>
      
      {articleData.content.map((block, index) => {
        if (block.type === "text") {
          return (
            <p key={index} className="mb-4 clear-none">
              {block.content}
            </p>
          );
        }
        
        if (block.type === "quote") {
          return (
            <blockquote
              key={index}
              className={`w-1/3 p-6 my-4 bg-gray-50 ${
                block.float === 'left' ? 'float-left mr-6' : 'float-right ml-6'
              }`}
            >
              <p className="text-xl italic mb-2">{block.content}</p>
              <footer className="text-sm">— {block.author}</footer>
            </blockquote>
          );
        }
        
        if (block.type === "image") {
          return (
            <figure
              key={index}
              className={`w-1/2 mb-4 ${
                block.float === 'left' ? 'float-left mr-6' : 'float-right ml-6'
              }`}
            >
              <img
                src={block.src}
                alt={block.alt}
                className="w-full rounded-lg"
              />
              <figcaption className="text-sm text-gray-600 mt-2">
                {block.caption}
              </figcaption>
            </figure>
          );
        }
      })}
      
      <div className="clear-both">By Author</div>
    </article>
  );
}

Blog Post with Pull Quotes

A blog post layout where pull quotes float to the sides and subsequent paragraphs clear the float.

This is a live editor. Play around with it!

export default function BlogPost() {
  const content = {
    title: "The Future of Remote Work",
    quotes: [
      {
        id: 1,
        text: "Remote work isn't just a trend - it's the future of how we'll collaborate globally.",
        author: "Jane Smith",
        position: "left"
      },
      {
        id: 2,
        text: "Technology has eliminated the need for physical presence in most knowledge work.",
        author: "John Doe",
        position: "right"
      }
    ],
    paragraphs: [
      {
        id: 1,
        text: "The landscape of work is changing rapidly, driven by technological advances and shifting cultural norms..."
      },
      {
        id: 2,
        text: "Companies are discovering that remote work can lead to increased productivity and employee satisfaction..."
      },
      {
        id: 3,
        text: "However, maintaining company culture and fostering collaboration requires intentional effort..."
      },
      {
        id: 4,
        text: "Tools and platforms are evolving to better support distributed teams and their unique needs..."
      },
      {
        id: 5,
        text: "The future workplace will likely be a hybrid model, combining the best of both worlds..."
      },
      {
        id: 6,
        text: "Organizations that adapt to this new reality will have a competitive advantage in attracting talent..."
      }
    ]
  };

  return (
    <article className="p-6 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold mb-6">{content.title}</h1>
      {content.paragraphs.map((para, index) => (
        <div key={para.id}>
          {index === 1 && (
            <blockquote className="float-left w-1/3 p-4 my-2 mr-4 bg-gray-100 italic">
              {content.quotes[0].text}
              <footer className="mt-2 text-sm">— {content.quotes[0].author}</footer>
            </blockquote>
          )}
          {index === 3 && (
            <blockquote className="float-right w-1/3 p-4 my-2 ml-4 bg-gray-100 italic">
              {content.quotes[1].text}
              <footer className="mt-2 text-sm">— {content.quotes[1].author}</footer>
            </blockquote>
          )}
          <p className={`mb-4 ${index === 5 ? 'clear-both' : ''}`}>{para.text}</p>
        </div>
      ))}
    </article>
  );
}

Recipe Card Layout

A recipe page where ingredients float left and instructions clear the float for better readability.

This is a live editor. Play around with it!

export default function RecipeLayout() {
  const recipe = {
    title: "Gourmet Pasta Dishes",
    recipes: [
      {
        id: 1,
        name: "Spaghetti Carbonara",
        ingredients: ["Pasta", "Eggs", "Pecorino", "Guanciale", "Black pepper"],
        instructions: "Start by bringing a large pot of salted water to boil..."
      },
      {
        id: 2,
        name: "Penne Arrabbiata",
        ingredients: ["Penne", "Tomatoes", "Garlic", "Chili", "Basil"],
        instructions: "Heat olive oil in a large pan over medium heat..."
      },
      {
        id: 3,
        name: "Fettuccine Alfredo",
        ingredients: ["Fettuccine", "Butter", "Cream", "Parmesan", "Nutmeg"],
        instructions: "Cook pasta according to package instructions..."
      },
      {
        id: 4,
        name: "Rigatoni alla Vodka",
        ingredients: ["Rigatoni", "Vodka", "Cream", "Tomato paste", "Onion"],
        instructions: "Sauté diced onions in olive oil until translucent..."
      },
      {
        id: 5,
        name: "Orecchiette with Broccoli",
        ingredients: ["Orecchiette", "Broccoli", "Garlic", "Anchovies", "Olive oil"],
        instructions: "Blanch broccoli florets in salted water..."
      },
      {
        id: 6,
        name: "Linguine alle Vongole",
        ingredients: ["Linguine", "Clams", "White wine", "Parsley", "Garlic"],
        instructions: "Clean clams thoroughly under cold running water..."
      }
    ]
  };

  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-6">{recipe.title}</h1>
      {recipe.recipes.map(recipe => (
        <div key={recipe.id} className="mb-8 border-b pb-8">
          <h2 className="text-2xl font-bold mb-4">{recipe.name}</h2>
          <div className="float-left w-1/3 pr-4">
            <h3 className="font-bold mb-2">Ingredients</h3>
            <ul className="list-disc pl-4">
              {recipe.ingredients.map((ingredient, index) => (
                <li key={index}>{ingredient}</li>
              ))}
            </ul>
          </div>
          <div className="clear-both pt-4">
            <h3 className="font-bold mb-2">Instructions</h3>
            <p>{recipe.instructions}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Best Practices

Maintain Design Consistency

Maintaining a uniform visual system is essential when working with the clear utilities in Tailwind CSS. Even small discrepancies can disrupt the appearance of your interface. A consistent approach involves establishing shared design tokens—such as spacing values, font sizes, and color palettes—so that each use of clear aligns with your foundational styles.

Another aspect of consistency involves documenting how and when to apply clear in different scenarios. Team members should have a common reference point for the placement of floated and cleared elements. This can reduce confusion and ensure that each new component follows the same styling conventions, regardless of the developer implementing it.

Build Responsive Design

Tailwind CSS offers responsive variants for its utilities, making it straightforward to adapt clear for various screen sizes. By default, you might only need clear-none on large screens, while smaller devices might benefit from clear-both to ensure text wraps properly. Using responsive classes like md:clear-none and sm:clear-left helps tailor the layout more precisely.

When testing for responsiveness, check how elements behave as you shrink or enlarge the viewport. A design that looks sharp on a desktop might overlap or crowd other elements on mobile if floats aren’t cleared correctly. Toggle between breakpoints in your browser’s dev tools to confirm that your clear classes align with your intended layout.

Accessibility Considerations

Enhance Readability and Navigability

Clearing floats directly affects how users visually parse your interface. By strategically applying clear, you ensure that text blocks remain visually distinct and segmented, improving clarity. This approach is helpful for users who rely on scanning through large sections of text or images.

Users with cognitive or visual impairments also benefit from logical separation of content. If an image is floated near a paragraph, a subsequent block that uses clear-both can signal a discrete boundary in the flow. This sets meaningful sections, making it easier for screen readers or assistive technology to interpret the structure.

Ensure Keyboard Accessibility

Keyboard accessibility ensures that users who do not rely on a mouse or touchscreen can still navigate effectively. When floats are used for layout, there’s a risk of creating visual illusions that mislead users about the tab order if content is not properly structured. Applying clear at the right points keeps the content flow predictable.

One key aspect is ensuring that tab focus follows a logical path. If a series of elements is intended to be read horizontally, but floats force them into a non-sequential arrangement, screen readers and keyboard users might become disoriented. Clearing floats at consistent breakpoints ensures that each section reads in the correct order.