🎯 CSS clear Property

The clear CSS property controls how an element behaves in relation to floated elements in a layout.

It is used to prevent elements from sitting next to floated items and forces them to move below left, right, or both sides of floated elements.

The clear property is essential when building layouts with float. It helps fix layout overlap issues and ensures proper element positioning.

• Prevents layout overlapping
• Fixes float-related positioning issues
• Improves layout structure
• Useful in legacy float-based designs

The element does not clear any floats and stays in normal flow.

div {
    clear: none;
}
                

The element moves below any left-floated elements.

div {
    clear: left;
}
                

The element moves below any right-floated elements.

div {
    clear: right;
}
                

The element clears both left and right floated elements and moves below them.

div {
    clear: both;
}
                

Resets the property to its default value (none).

Inherits the clear value from the parent element.