Tailwind CSS Floats
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.
Tailwind CSS FLoat Class Table
Class | Properties |
---|---|
float-right | float: right; |
float-left | float: left; |
float-none | float: none; |
Windframe Tailwind blocks
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.