Tailwind CSS - Clear

Previous
Quiz
Next

Tailwind CSS Clear is a utility class for controlling the flow of elements around the floated element. It is the utility for controlling the wrapping of content around an element.

Tailwind CSS Clear Classes

The following is the list of Tailwind CSS Clear Classes that provides an effective way to align the content around the element.

Class CSS Properties
clear-start clear: inline-start;
clear-end clear: inline-end;
clear-right clear: right;
clear-left clear: left;
clear-both clear: both;
clear-none clear: none;

Functionality of Tailwind CSS Clear Classes

  • Clear-start: This class replaces CSS Clear: inline-start; property. It Clears the element on the inline-start side based on the direction of the text.
  • Clear-end: This class replaces CSS Clear: inline-end; property. It Clears the element on the inline-end side based on the direction of the text.
  • Clear-right: This class replaces CSS Clear: right; property. It moves the element below any preceding right-floated element.
  • Clear-left: This Class replaces CSS Clear: left; property. It moves the element below any preceding left-floated element.
  • Clear-both: This Class replaces CSS Clear: both; property. It moves the element below all preceding floated elements.
  • Clear-none: This Class replaces CSS Clear: none; property, ensuring element doesnt Clear.

Tailwind CSS Clear Class Examples

The following examples will illustrate the Tailwind CSS Clear class utility.

Clear Start & End of Floated Element

The below example is illustrating the use of Tailwind CSS Clear-Start & Clear-End Classes.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3">
    <h2 class="font-bold text-xl">
        Tailwind CSS Clear-Start
    </h2>
    <div class="border-4 p-2 mt-4">
        <span class="float-start bg-pink-200">
                Float-Start Content
            </span>
        <span class="float-end bg-blue-200 p-4">
                Float-End Content
            </span>
        <p class="clear-start">
            Clear-start class Clears the element 
            on the inline-start side based on the 
            direction of the text.
        </p>
    </div>
    <h2 class="font-bold text-xl">
        Tailwind CSS Clear-End
    </h2>
    <div class="border-4 p-2 mt-4">
        <span class="float-start bg-pink-200">
                Float-Start Content
            </span>
        <span class="float-end bg-blue-200 p-4">
                Float-End Content
            </span>
        <p class="clear-end">
            Clear-end class Clears the element
            on the inline-end side based on the
            direction of the text.
        </p>
    </div>
</body>

</html>

Clear Right of Floated Element

The below example is illustrating the use of Tailwind CSS Clear-right Class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
    <h2 class="font-bold text-xl">
        Tailwind CSS Clear-Right
    </h2>
    <div class="bg-pink-200 p-2 mt-2">
        <div class="float-right bg-blue-300 p-2">
            Float None
        </div>
        <p class="clear-right">
            Clear-right class moves th element below
            any preceding right-floated element.
        </p>
    </div>
</body>
</html>

Clear Left of Floated Element

The below example is illustrating the use of Tailwind CSS Clear-Left Class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
    <h2 class="font-bold text-xl">
        Tailwind CSS Clear-Left
    </h2>
    <div class="bg-pink-200 p-2 mt-2">
        <div class="float-left bg-blue-300 p-2">
            Float None
        </div>
        <p class="clear-left">
            Clear-Left class moves th element below 
            any preceding Left-floated element.
        </p>
    </div>
</body>
</html>

Clear-Both & None of Floated Element

The below example is illustrating the use of Tailwind CSS Clear-Both & Clear-None Classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
    <h2 class="font-bold text-xl">
        Tailwind CSS Clear-Both
    </h2>
    <div class="bg-pink-200 
                p-2 mt-2">
        <div class="float-left bg-blue-300 p-2">
            Clear-Both
        </div>
        <p class="clear-both">
            Clear-both class moves the element below
            all preceding floated elements.
        </p>
    </div>
    
    <h2 class="font-bold text-xl">
        Tailwind CSS Clear-None
    </h2>
    <div class="bg-pink-200 p-4 mt-2">
        <div class="float-right bg-blue-300 p-1">
            Clear-Both
        </div>
        <p class="clear-none">
            Clear-None class ensures element
            doesn't Clear.
        </p>
    </div>
</body>
</html>
Print Page
Previous
Next