Tailwind CSS Float

The float class acknowledges more than one worth (value) in tailwind CSS. It is an option in contrast to the CSS float property. The float class characterizes the progression of content for controlling the wrapping of content around an element.

Float Classes

There are three types of float classes, which are as follows:

• float-right
• float-left
• float-none

1. float-right

This class is utilized to make the element float on the right half (right-side) of the container.

Syntax:

<element class="float-right">...</element>

Example:

Code is as follows:

<!DOCTYPE html> 
<head> 
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
rel="stylesheet"> 
</head> 
<body class="text-center"> 
<center>
<h1 class="text-red-600 text-5xl font-bold">
Tutorial and Example
</h1> 
<b>float Class - Tailwind CSS </b> 
<div class="mx-10">
<img class="float-right p-2" 
src=
“javatpoint logo_image.png">
<p class="text-justify ">How often were you disappointed while watching out
for a decent assortment of programming/calculation/interview
questions ? What did you expect and what did you get?
This entry has been made to give elegantly composed,
all around thought and very much clarified answers for chose
questions. An IIT Roorkee former student and originator of
Javatpoint. He loves to take care of programming issues
in most productive ways. Aside from Javatpoint, he
has worked with DE Shaw and Co. as a product designer
what's more JIIT Noida as an associate professor.It is a decent
stage to pick up programming. It is an instructive
site. Get ready for the Recruitment drive of item
based organizations like Microsoft, Amazon, Adobe and so on with
a free internet based arrangement readiness course. </p>
</center>
</body> 
</html>

The output for the above code is:

In the above output, the image which is circled is following the float right command.

2. float-left

This class is utilized to make the element float on the left half (side) of the container.

Syntax:

<element class="float-left"">...</element>

Example:

Code is as follows:

<!DOCTYPE html> 
<head> 
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
rel="stylesheet"> 
</head> 
<body class="text-center"> 
<center>
<h1 class="text-red-600 text-5xl font-bold">
Tutorial and Example
</h1> 
<b>float Class - Tailwind CSS </b> 
<div class="mx-10">
<img class="float-left p-2" 
src=
"javatpoint logo_image.png">
<p class="text-justify ">How often were you disappointed while watching out
for a decent assortment of programming/calculation/interview
questions? What did you expect and what did you get?
This entry has been made to give elegantly composed,
all around thought and very much clarified answers for chose
questions. An IIT Roorkee former student and originator of
Javatpoint. He loves to take care of programming issues
in most productive ways. Aside from Javatpoint, he
has worked with DE Shaw and Co. as a product designer
what's more JIIT Noida as an associate professor.It is a decent
stage to pick up programming. It is an instructive
site. Get ready for the Recruitment drive of item
based organizations like Microsoft, Amazon, Adobe and so on with
a free internet based arrangement readiness course.</p>
</center>
</body> 
</html>

The output for the above code is:

In the above output, the image which is (at left corner) circled is following the float left command.

3. float-none

This class is utilized to make the element float at the default place. We are utilizing the center tag so the picture is put in the middle (center).

Syntax:

<element class="float-none"">...</element>

Example:

Code is as follows:

<!DOCTYPE html> 
<head> 
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
rel="stylesheet"> 
</head> 
<body class="text-center"> 
<center>
<h1 class="text-red-600 text-5xl font-bold">
Tutorial and Example
</h1> 
<b>float Class - Tailwind CSS </b> 
<div class="mx-10">
<img class="float-none p-2" 
src=
"javatpoint logo_image.png">
<p class="text-justify ">How often were you disappointed while watching out
for a decent assortment of programming/calculation/interview
questions? What did you expect and what did you get?
This entry has been made to give elegantly composed,
all around thought and very much clarified answers for chose
questions. An IIT Roorkee former student and originator of
Javatpoint. He loves to take care of programming issues
in most productive ways. Aside from Javatpoint, he
has worked with DE Shaw and Co. as a product designer
what's more JIIT Noida as an associate professor.It is a decent
stage to pick up programming. It is an instructive
site. Get ready for the Recruitment drive of item
based organizations like Microsoft, Amazon, Adobe and so on with
a free internet based arrangement readiness course.</p>
</center>
</body> 
</html>

The output for the above code is:

In the above output, the image which is circled (at left corner) is following the float none command.