Tailwind CSS - Float

Previous
Quiz
Next

Tailwind CSS Float is a utility class for controlling the flow of elements or content floating. It allows the content to float right, left, or align it at the start and end of the element.

Tailwind CSS Float Classes

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

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

Functionality of Tailwind CSS Float Classes

  • float-start: This class replaces CSS float: inline-start; property. It sets elements to float on the inline-start side based on the direction of the text.
  • float-end: This class replaces CSS float: inline-end; property. It sets elements to float on the inline-end side based on the direction of the text.
  • float-right: This class replaces CSS float: right; property, floating element to the right of its container.
  • float-left: This Class replaces CSS float: left; property, floating element to the left of its container.
  • float-none: This Class replaces CSS float: none; property, ensuring element doesnt float.

Tailwind CSS Float Class Examples

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

Tailwind CSS Float-Start & Float-End Classes

The below example is illustrating the use of Tailwind CSS Float-Start & Float-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 FLoat-Start & Float-End
    </h2>
    <div class="border-4 
                p-2 mt-4">
        <p>
            <span class="float-start bg-pink-200">
                Float-Start Content
            </span>
            <span class="float-end bg-blue-200">
                Float-End Content
            </span> 
            Content will be floated based on text direction.
        </p>
    </div>

</body>

</html>

Tailwind CSS Float-Right Class

The below example is illustrating the use of Tailwind CSS Float-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 FLoat-Right
    </h2>
    <div class="bg-pink-200  p-3 mt-2">
        <div class="float-right bg-blue-300 p-2">
            Float Right
        </div>
        <p>
            Tailwind CSS is a utility-first CSS framework 
            for designing web pages. "Utility-first" means 
            the framework focuses on providing utility classes. 
            It is a low-level CSS framework that is easy to
            learn and fast to use in the project.
        </p>
    </div>
</body>
</html>

Tailwind CSS Float-Left Class

The below example is illustrating the use of Tailwind CSS Float-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 FLoat-Left
    </h2>
    <div class="bg-pink-200 p-2 mt-2">
        <div class="float-left bg-blue-300 p-2">
            Float Left
        </div>
        <p>
            Tailwind CSS is a utility-first CSS framework 
            for designing web pages. "Utility-first" means 
            the framework focuses on providing utility classes. 
            It is a low-level CSS framework that is easy to
            learn and fast to use in the project.
        </p>
    </div>
</body>
</html>

Tailwind CSS Float-None Class

The below example is illustrating the use of Tailwind CSS Float-None 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 FLoat-None
    </h2>
    <div class="bg-pink-200 p-2 mt-2">
        <div class="float-none bg-blue-300 p-2">
            Float None
        </div>
        <p>
            Tailwind CSS is a utility-first CSS framework 
            for designing web pages. "Utility-first" means 
            the framework focuses on providing utility classes. 
            It is a low-level CSS framework that is easy to
            learn and fast to use in the project.
        </p>
    </div>
</body>
</html>
Print Page
Previous
Next