Tailwind Floats

The tailwind float utility class allows you to control the floating behavior of elements. With Tailwind's float class, you can easily float elements to the left or right within their containing elements.

Applying Tailwind Float

To apply a specific Tailwind float behavior to an element, you can use the float-{value} utility class, where {value} represents the desired float behavior. Here are the common values you can use:

• float-left: Floats the element to the left side of its containing element.
• float-right: Floats the element to the right side of its containing element.
• float-none: Removes any floating behavior from the element. Here's an example:

<div>
  <img src="https://devwares.com" class="float-left" />
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel
    sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius
    sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo
    autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
    nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum
    nesciunt ipsum debitis quas aliquid. Reprehenderit, quia.
  </p>
</div>

Preview

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia.

In the above example, a <div> element is styled with the float-left class, which floats the element to the left side of its containing element.

Clearing Tailwind Floats

When you float an element, it can affect the layout and positioning of subsequent elements. To prevent this, you may need to clear the float. Tailwind provides a clear-{value} utility class that you can apply to elements following a floated element to clear the float.

Here are the common values you can use:

• clear-left: Clears any left floats.
• clear-right: Clears any right floats.
• clear-both: Clears both left and right floats.

<div>
  <img src="https://devwares.com" class="float-left" />
  <p>This element floats to the left side.</p>
  <div class="clear-both">
    This element clears the float and appears below the floated element.
  </div>
</div>

Preview

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel.

This element clears the float and appears below the floated element.

Tailwind CSS FLoat Class Table

Windframe Tailwind blocks

blog