Tailwind CSS Float - GeeksforGeeks

Tailwind CSS Float

Last Updated : 28 Oct, 2026

Tailwind CSS provides utility classes to control the float property of an element. These utilities let you float an element to the left or right, remove floating, or use logical start and end directions.

Float Classes

ClassCSS PropertyDescription
float-rightfloat: right;Floats an element to the right of its containing block.
float-leftfloat: left;Floats an element to the left of its containing block.
float-nonefloat: none;Removes floating from an element.
float-startfloat: inline-start;Floats an element toward the start of the current writing direction.
float-endfloat: inline-end;Floats an element toward the end of the current writing direction.

1. Tailwind CSS Float Right (float-right Class)

The float-right utility is used to float an element to the right side of its containing block.

Syntax

<element class="float-right">...</element>
HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body>

<!--Driver Code Ends-->

    <div class="mx-auto max-w-3xl p-4">
        <img
            class="float-right ml-4 mb-2 w-32 rounded-lg"
            src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
            alt="GeeksforGeeks"
        >

        <p>
            Tailwind CSS provides utility classes for controlling the
            float property. When an image is floated to the right,
            surrounding text flows around the left side of the image.
            This is useful for article-style content and other content
            where text needs to wrap around an image.
        </p>
    </div>

<!--Driver Code Starts-->

</body>
</html>
<!--Driver Code Ends-->

2. Tailwind CSS Float Left (float-left Class)

The float-left utility floats an element to the left side of its containing block.

Syntax

<element class="float-left">...</element>
HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body>

<!--Driver Code Ends-->

    <div class="mx-auto max-w-3xl p-4">

        <img
            class="float-left mr-4 mb-2 w-32 rounded-lg"
            src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
            alt="GeeksforGeeks"
        >

        <p>
            Tailwind CSS provides utility classes for controlling common
            CSS properties directly in HTML. With the float-left utility,
            an image can be floated to the left while surrounding text
            flows around the right side of the image. This is useful
            for article-style content and other layouts where text needs
            to wrap around an image.
        </p>

    </div>

<!--Driver Code Starts-->

</body>

</html>
<!--Driver Code Ends-->

3. Tailwind CSS Float None (float-none Class)

The float-none utility removes floating from an element.

Syntax

<element class="float-none">...</element>
HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tailwind CSS Float None</title>

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body>

<!--Driver Code Ends-->

    <div class="mx-auto max-w-3xl p-4">

        <h1 class="mb-6 text-3xl font-bold">
            Tailwind CSS Float None
        </h1>

        <div class="rounded-lg bg-gray-100 p-6">

            <img
                class="float-none mx-auto mb-4 w-32 rounded-lg"
                src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
                alt="GeeksforGeeks"
            >

            <p class="text-lg leading-7">
                The float-none utility prevents the image from floating.
                The image therefore follows the normal flow of the document.
                The mx-auto utility centers the image horizontally because
                the image has a defined width.
            </p>

        </div>

    </div>

<!--Driver Code Starts-->

</body>

</html>
<!--Driver Code Ends-->

4. Tailwind CSS Float Start (float-start Class)

The float-start utility floats an element toward the start of the current writing direction.

Syntax

<element class="float-start">...</element>
HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body>

<!--Driver Code Ends-->

    <div class="mx-auto max-w-3xl p-4">

        <img
            class="float-start me-4 mb-2 w-32 rounded-lg"
            src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
            alt="GeeksforGeeks"
        >

        <p>
            This image is floated toward the start of the current
            writing direction. Logical float utilities are useful when
            building layouts that need to support different writing
            directions.
        </p>

    </div>

<!--Driver Code Starts-->

</body>

</html>
<!--Driver Code Ends-->

5. Tailwind CSS Float End (float-end Class)

The float-end utility floats an element toward the end of the current writing direction.

Syntax

<element class="float-end">...</element>
HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body>

<!--Driver Code Ends-->

    <div class="mx-auto max-w-3xl p-4">

        <img
            class="float-end ms-4 mb-2 w-32 rounded-lg"
            src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
            alt="GeeksforGeeks"
        >

        <p>
            This image is floated toward the end of the current writing
            direction while the surrounding content flows around it.
        </p>

    </div>

<!--Driver Code Starts-->

</body>

</html>
<!--Driver Code Ends-->

Responsive Float Utilities

Tailwind CSS supports responsive variants for float utilities. You can use a breakpoint prefix such as md: to change the float behavior at a particular screen size.

For example:

<img
    class="float-none md:float-right"
    src="image.jpg"
    alt="Example"
>

In this example:

  • float-none applies by default.
  • md:float-right floats the image to the right at the md breakpoint and above.

You can also combine multiple responsive variants:

<img
    class="float-none sm:float-left lg:float-right"
    src="image.jpg"
    alt="Example"
>

This allows the float behavior to change according to the viewport size.

Removing a Float

Use the float-none utility when you need to remove a previously applied float.

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

You can override it at a breakpoint:

<div class="float-right md:float-none">
    ...
</div>

The element floats right by default and stops floating at the md breakpoint and above.

Float and Text Wrapping

One of the main uses of the CSS float property is allowing text and other inline content to wrap around an element.

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tailwind CSS Float and Text Wrapping</title>

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body class="bg-gray-100">

<!--Driver Code Ends-->

    <div class="mx-auto max-w-3xl p-6">

        <h1 class="mb-6 text-3xl font-bold">
            Float and Text Wrapping
        </h1>

        <div class="rounded-lg bg-white p-6 shadow">

            <img
                class="float-left mr-4 mb-2 w-40 rounded-lg"
                src="https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
                alt="GeeksforGeeks"
            >

            <p class="text-lg leading-7">
                Floating an image allows the surrounding text to flow around
                it. The float-left utility floats the image to the left side
                of its containing block, while the surrounding text flows
                around the right side of the image. This behavior is useful
                for article-style content where text needs to wrap around an
                image. Tailwind CSS provides utility classes that make it
                easy to apply the CSS float property directly to HTML
                elements. You can use float-left or float-right depending
                on where you want the element to float. The surrounding
                content automatically flows around the floated element when
                there is enough available space.
            </p>

        </div>

    </div>

<!--Driver Code Starts-->

</body>

</html>
<!--Driver Code Ends-->

Float vs Flexbox and Grid

Float utilities are useful when content needs to wrap around an element, particularly in article-style layouts. For general page layouts, however, modern CSS layout systems such as Flexbox and Grid are usually more appropriate.

For example, instead of using floats to place three items side by side, you can use Flexbox:

<div class="flex gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Or use Grid:

<div class="grid grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Float remains useful when you specifically want surrounding content to flow around an element.

Comment

Explore