Floats and Clear

Floats:

A floated element is removed from the normal document flow and positioned to the left or right of its container, allowing other content to flow around it. This is useful for creating layouts.
 

1. float-start: It pushes text to the left in languages (Left-to-Right) just like float-left.

2. float-end: It positions the element to the far right of its container. Text wraps around the left side of the element.

3. float-right: It makes an element float to the right side of its container.

4. float-left: It makes an element float to the left side of its container.

5. float-none: It serves as a reset function for the float property.

Clear:

The clear classes are essential for managing how content interacts with floated elements.

1. clear-left: Clears any left-floated elements before the current element.
2. clear-right: Clears any right-floated elements before the current element.
3. clear-both: Clears both left and right floats before the current element. This is the most used clear class.
 

Example:

<div class="container">
 <img class="float-left w-20 h-20 mr-4" src="image1.jpg" alt="Image 1">
 <p>This is some text content that wraps around the image on the right.</p>
 <div class="clear-both mt-4"> <p>This paragraph comes after the floated image and won't be wrapped around it.</p>
 </div>
</div>