clear

Definition

The clear CSS property is used to specify whether an element should be positioned next to floating elements or whether it should be positioned below them. It can be used on elements that are themselves floated, or on elements that are not floated but that are adjacent to floated elements.

Examples

Clear left-floating elements: To make sure that an element is positioned below any left-floating elements that precede it, you can use the clear: left value:

.clear-left {
    clear: left;
}

Clear right-floating elements: To make sure that an element is positioned below any right-floating elements that precede it, you can use the clear: right value:

.clear-right {
    clear: right;
}

Clear both-floating elements: To make sure that an element is positioned below any floating elements that precede it on both left and right, you can use the clear: both value:

.clear-both {
    clear: both;
}

Clear floating elements inside a container: To clear all the floating elements inside a container you can use the overflow:auto property on the container:

.container {
    overflow: auto;
}

Clear floating elements with a pseudo-element : You can also use a clearfix hack with a pseudo element to clear the floating elements.

.clearfix::before, .clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Values

Best Practices

• Use clear with float: The clear property should be used in combination with the float property to control the layout of floating elements. When an element is floated, the element that comes after it will flow around it, unless you use the clear property to make sure that the element is positioned below the floating element.
• Clearfix hack: When you have a container with floating elements inside, use a clearfix hack with a pseudo element to clear the floating elements instead of using the clear property on the container.
• Use clear on the correct element: Be careful when applying the clear property to make sure that you are applying it to the correct element. Applying clear: left to an element will make sure that the element is positioned below any left-floating elements that precede it, but it will not affect right-floating elements.
• Use clear sparingly: Use the clear property only when necessary, as it can disrupt the natural flow of elements on the page.
• Be aware of browser compatibility: Keep in mind that some older browsers may not support the clear property or may require a specific syntax.
• Use media queries: Use media queries to change the layout of elements based on screen size. This will help to make your layout more adaptable to different screen sizes.

Browser Compatibility