With Tailwind CSS, the “float” is a versatile tool that facilitates floating of elements to the left or right of their containers.
This class is especially valuable for designing multi-column layouts where you may require elements to float left or right as per your design requirements.
Tailwind Float Classes
| Classes | Overview |
| float-right | An element floats to the right of its container using this class. |
| float-left | This class floats an element to the left of its container. |
| float-none | This class resets the float property for an element and prevents any text or content that follows it from wrapping around it. |
Tailwind float-right
After adding the “float-right” class to an HTML element in Tailwind CSS, the element will be aligned to the right of its container, causing any subsequent text or content to wrap around it accordingly.
Syntax
<element class="float-right">....</element>
This example illustrates the use of the “float-right” class in Tailwind CSS:
<!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-medium my-3 text-slate-800">float-right Class in Tailwind CSS</p>
<div class="mx-10">
<img class="float-right p-2 border-2 w-32 ml-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<p class="text-justify">
Nulla sed pellentesque enim, vitae iaculis sem. Nulla facilisi.
Etiam sed odio at nibh cursus lobortis. Ut consectetur est sed
turpis fermentum hendrerit. Duis rutrum massa odio, ut placerat
eros posuere vitae. Etiam euismod egestas dui, sed imperdiet
elit aliquam vel. Morbi non diam hendrerit, pulvinar justo sit
amet, pellentesque ipsum. Maecenas ex eros, mollis tincidunt est
eget, condimentum bibendum libero. Integer egestas sem sem,
vitae tristique erat fringilla id. Vivamus mollis pharetra metus,
quis dictum ipsum tristique ac. Sed pulvinar suscipit odio.
</p>
</div>
</center>
</body>
</html>
Tailwind float-left
If you apply the “float-left” class to an element, it will be positioned to the left of its container and any text or other content surrounding it will wrap around.
Syntax
<element class="float-left"">....</element>
The following example aims to demonstrate the use of the “float-left” class in Tailwind CSS:
<!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-medium my-3 text-slate-800">float-left Class in Tailwind CSS</p>
<div class="mx-10">
<img class="float-left p-2 border-2 w-32 mr-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<p class="text-justify">
Nulla sed pellentesque enim, vitae iaculis sem. Nulla facilisi.
Etiam sed odio at nibh cursus lobortis. Ut consectetur est sed
turpis fermentum hendrerit. Duis rutrum massa odio, ut placerat
eros posuere vitae. Etiam euismod egestas dui, sed imperdiet
elit aliquam vel. Morbi non diam hendrerit, pulvinar justo sit
amet, pellentesque ipsum. Maecenas ex eros, mollis tincidunt est
eget, condimentum bibendum libero. Integer egestas sem sem,
vitae tristique erat fringilla id. Vivamus mollis pharetra metus,
quis dictum ipsum tristique ac. Sed pulvinar suscipit odio.
</p>
</div>
</center>
</body>
</html>
Tailwind float-none
When Tailwind float-none class is applied to an element, any previously applied float will be removed, and the element will be rendered in its default position as per the document flow. This is the default class.
Syntax
<element class="float-none">....</element>
You can refer to the example below for a proper understanding of the float-none class:
