Clear

What is the Clear Property?

The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. This property determines whether the element should be displayed alongside the floating element or positioned below it in the document flow.

When an element has the clear property applied, the browser calculates a new position for that element such that its top border edge is positioned below the bottom margin edge of all relevant floated elements. This ensures that floated elements do not overlap with or intrude into the space of cleared elements, creating a clean visual separation between different parts of a layout.

The clear property applies to both floating and non-floating elements, though its behavior differs slightly depending on the context. For non-floating blocks, clear moves the border edge of the element down until it is below the margin edge of all relevant floats, with the top margin collapsing in the process. Understanding clear is essential for web development projects that need precise layout control.

Key Points:

• Controls element positioning relative to floated elements
• Forces elements below floats for predictable layouts
• Essential for managing complex float-based designs

Syntax and Values

The clear property accepts six keyword values that control which floated elements the element should clear. When working with Flexbox layouts, the clear property behaves differently since Flexbox creates its own formatting context.

/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: unset;

Practical Examples

Example 1: Basic Clear Both

.float-left {
 float: left;
 width: 200px;
}

.content-below {
 clear: both;
}

When applied, the .content-below element will always appear below the .float-left element, regardless of the float's height.

Example 2: Clear Left for Sidebar Layouts

.sidebar {
 float: left;
 width: 250px;
}

.main-content {
 clear: left;
 margin-left: 270px;
}

This pattern ensures the main content starts below the sidebar rather than wrapping alongside it. For responsive layouts, consider combining this with max-width constraints to maintain proper proportions.

Example 3: Clearfix Pattern

.container::after {
 content: "";
 display: block;
 clear: both;
}

The clearfix technique forces a container to expand and contain its floated children, preventing layout collapse.

Block Formatting Context Considerations

A block formatting context (BFC) is a region of the page in which block-level boxes are laid out. The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

When an element establishes a new BFC, it contains floats rather than allowing them to extend beyond its boundaries. This behavior can be leveraged to create layouts where floated elements are contained within specific areas. The visibility property can also affect how elements interact within a BFC.

Properties that create a new BFC:

• overflow (other than visible)
• display: flow-root
• position: absolute or fixed
• display: inline-block

Understanding BFC is essential for using clear effectively, as floats from different formatting contexts may not interact as expected.

Best Practices

1. Use clear: both by default - When you want to ensure an element clears all floats, both is the safest choice and prevents confusion about which direction is being cleared.

2. Prefer display: flow-root for containing floats - Modern browsers support this property, which cleanly contains floats without clearfix hacks.

3. Use logical properties for international projects - inline-start and inline-end adapt to text direction, making layouts work correctly for RTL languages.

4. Test across browsers - While clear has excellent support, always verify layouts in target browsers, especially when using logical values.

5. Consider modern layout methods - Flexbox and CSS Grid often eliminate the need for float-based layouts entirely for complex designs. These modern approaches align with web performance optimization best practices.