Tailwind CSS Float

Tailwind CSS float utility classes are used to control the wrapping element alignment. It is basically just like CSS float property.

There are followings float classes:.float-right, .float-left, .float-none.

Float: float-right

The .float-right class is used to place the element right side of the container.

General Syntax

      
        <element class="float-right"></element>      
    
Try it now

Source Code

          <div class="md:container md:mx-auto">
  <img src="https://picsum.photos/id/237/100/50" class="float-right" alt="image" />
  <p>In this example, you can learn how to align HTML elements to the right using the Tailwind CSS float concept. </p>
</div>
        
Try it now

Source Code : Output

image

In this example, you can learn how to align HTML elements to the right using the Tailwind CSS float concept.

Float: float-left

The .float-left class is used to place the element on the left side of the container.

General Syntax

      
        <element class="left-float"></element>      
    
Try it now

Source Code

          <div class="md:container md:mx-auto">
  <img src="https://picsum.photos/id/237/100/60" class="float-left" alt="image" />
  <p>To align the HTML element on the left, use Tailwind CSS, float-left class./p>
</div>
        
Try it now

Source Code : Output

image

To align the HTML element on the left, use Tailwind CSS, float-left class./p>

Float: disabled

To reset any applied float, use the .float-none class.

General Syntax

      
        <element class="float-none"></element>      
    
Try it now

Source Code

          <div class="container">
  <img class="float-none" src="https://picsum.photos/id/237/100/60" 
 alt="float none applied on this image" />
  <p>To reset the float, use the Tailwind .float-none class.</p>
</div>
        
Try it now

Source Code : Output

float none applied on this image

To reset the float, use the Tailwind .float-none class.

Web Tutorials

Tailwind CSS Float
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4