Clear In Tailwind CSS
Tailwind clear is one of the most useful class, and in this article, we will explore it with examples in depth.
In Tailwind CSS, the Clear class indicates which side of a floating element cannot be floated. In this method, the element’s position is determined or retrieved in relation to floating objects.
In cases where the element can be placed horizontally next to a floating element, it will be placed there.
Its primary use is to regulate content wrapping around an element.
This class accepts multiple values and covers all properties in class form.
It serves as an alternative to the CSS clear property.
Tailwind Clear
When you float an element, it is taken out of the normal document flow, and other elements will flow around it.
This can be useful for creating layouts, but it can also cause problems if you’re not careful.
If you have multiple floated elements, for example, they can sometimes overlap or cause layout issues.
Tailwind clear class provides an easy way to control how floated elements are cleared.
You can use it to force an element to appear below any floated elements that come before it.
Tailwind Clear Classes
| Classes | Overview |
| clear-left | This class clears the left float. It forces an element to appear below any left floated elements that come before it. |
| clear-right | This class clears the right float. It forces an element to appear below any right floated elements that come before it. |
| clear-both | This class clears both left and right floats. It forces an element to appear below any floated elements that come before it. |
| clear-none | This class does not clear any floats. It leaves an element in the normal document flow, allowing other elements to flow around it. |
Tailwind Clear-left
This class prevents elements from floating to the left of another element.
Syntax
<element class="clear-left">....</element>
This example highlights the use of clear-left class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<center>
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Clear Class in Tailwind CSS</p>
<p class="font-medium my-2 text-gray-500">clear-left</p>
<div class="mx-10">
<img class="float-left p-2 w-20 h-20 border-2" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<img class="float-right p-2 w-40 border-2 mx-2" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<p class="text-justify clear-left font-medium">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus scelerisque ultrices.
Ut malesuada viverra ullamcorper. Duis varius, nisl at dignissim tempus, sapien arcu interdum
diam, eget commodo quam est et erat. Nam et tincidunt elit. Ut sem magna, molestie eget dapibus
in, varius ut est. Fusce in semper ipsum, sed placerat nunc. Nunc in semper purus. Pellentesque
augue nunc, posuere id arcu ullamcorper, porttitor pellentesque mi. Donec eu justo cursus,
tincidunt quam non, ultricies lorem.
</p>
</div>
</center>
</body>
</html>
Tailwind Clear-right
This class prevents elements from floating to the right of another element.
Syntax
<element class="clear-right">....</element>
Below is an example corresponding to clear-right class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<center>
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Clear Class in Tailwind CSS</p>
<p class="font-medium my-2 text-gray-500">clear-right</p>
<div class="mx-10">
<img class="float-left p-2 w-20 h-20 border-2" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<img class="float-right p-2 w-40 border-2 mx-2" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<p class="text-justify clear-right font-medium">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus scelerisque ultrices.
Ut malesuada viverra ullamcorper. Duis varius, nisl at dignissim tempus, sapien arcu interdum
diam, eget commodo quam est et erat. Nam et tincidunt elit. Ut sem magna, molestie eget dapibus
in, varius ut est. Fusce in semper ipsum, sed placerat nunc. Nunc in semper purus. Pellentesque
augue nunc, posuere id arcu ullamcorper, porttitor pellentesque mi. Donec eu justo cursus,
tincidunt quam non, ultricies lorem.
</p>
</div>
</center>
</body>
</html>
Tailwind Clear-both
This class prevents elements from floating on both sides of the other element.
Syntax
<element class="clear-both">....</element>
This example gives a practical overview of clear-both class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<center>
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Clear Class in Tailwind CSS</p>
<p class="font-medium my-2 text-gray-500">clear-both</p>
<div class="mx-10">
<img class="float-left p-2 w-20 h-20 border-2" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<img class="float-right p-2 w-40 border-2 mx-2" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<p class="text-justify clear-both font-medium">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus scelerisque ultrices.
Ut malesuada viverra ullamcorper. Duis varius, nisl at dignissim tempus, sapien arcu interdum
diam, eget commodo quam est et erat. Nam et tincidunt elit. Ut sem magna, molestie eget dapibus
in, varius ut est. Fusce in semper ipsum, sed placerat nunc. Nunc in semper purus. Pellentesque
augue nunc, posuere id arcu ullamcorper, porttitor pellentesque mi. Donec eu justo cursus,
tincidunt quam non, ultricies lorem.
</p>
</div>
</center>
</body>
</html>
Tailwind Clear-none
This class allows elements from floating on both sides of another element.
Syntax
<element class="clear-none">....</element>
Here is an example that focuses on clear-none class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head><body class="text-center">
<center>
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Clear Class in Tailwind CSS</p>
<p class="font-medium my-2 text-gray-500">clear-none</p>
<div class="mx-10">
<img class="float-left p-2 w-20 h-20 border-2" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<img class="float-right p-2 w-40 border-2 mx-2" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<p class="text-justify clear-none font-medium">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus scelerisque ultrices.
Ut malesuada viverra ullamcorper. Duis varius, nisl at dignissim tempus, sapien arcu interdum
diam, eget commodo quam est et erat. Nam et tincidunt elit. Ut sem magna, molestie eget dapibus
in, varius ut est. Fusce in semper ipsum, sed placerat nunc. Nunc in semper purus. Pellentesque
augue nunc, posuere id arcu ullamcorper, porttitor pellentesque mi. Donec eu justo cursus,
tincidunt quam non, ultricies lorem.
</p>
</div>
</center>
</body>
</html>
