📪Clear

.clear-none

Sets the clear property to none, allowing elements to be positioned adjacent to floated elements on both sides.

CSS equivalent: clear: none;

Example usage:

<div class="clear-none">This element clears no floats.</div>

.clear-left

Sets the clear property to left, forcing the element to be positioned below any preceding left-floated elements.

CSS equivalent: clear: left;

Example usage:

<div class="clear-left">This element clears left floats.</div>

.clear-right

Sets the clear property to right, forcing the element to be positioned below any preceding right-floated elements.

CSS equivalent: clear: right;

Example usage:

<div class="clear-right">This element clears right floats.</div>

.clear-both

Sets the clear property to both, forcing the element to be positioned below any preceding left or right-floated elements.

CSS equivalent: clear: both;

Example usage:

<div class="clear-both">This element clears both left and right floats.</div>

.clear-inline-start

Sets the clear property to inline-start, forcing the element to be positioned below any preceding left or right-floated elements within an inline formatting context.

CSS equivalent: clear: inline-start;

Example usage:

<div class="clear-inline-start">This element clears inline-start floats.</div>

.clear-inline-end

Sets the clear property to inline-end, forcing the element to be positioned below any preceding left or right-floated elements within an inline formatting context.

CSS equivalent: clear: inline-end;

Example usage:

<div class="clear-inline-end">This element clears inline-end floats.</div>

The clear property controls the behavior of an element concerning floated elements. Use these classes to control the positioning of elements in relation to floats within your layout.