What Is the CSS Clear Property Used For?

The CSS clear property controls how elements interact with preceding floated content in a web layout. When elements are floated, surrounding content naturally wraps around them, which often leads to misaligned sections or collapsed parent containers. Applying the clear property forces an element below any floated elements on its left, right, or both sides, effectively resetting the standard block document flow.

How Floating Elements Affect Layout

When you apply float: left or float: right to an element, the browser removes it from normal document flow. Subsequent text, inline elements, and adjoining blocks will wrap around the remaining open space of the floated box.

Without explicit clearing, succeeding elements—such as paragraphs, headings, or footer containers—will slide upward into the vacant space adjacent to the floated items. This wrapping behavior is useful for inline images within text, but it disrupts structural components like multi-column grids or section dividers.

Core Values of the clear Property

The clear property specifies which sides of an element cannot sit adjacent to earlier floated elements.

• clear: left; pushes the element downward until its top margin is below the bottom outer edge of any preceding left-floated elements.
• clear: right; pushes the element downward until it clears all preceding right-floated elements.
• clear: both; ensures the element clears floats on both the left and right sides, making it the most common declaration for structural resets.
• clear: none; is the default value, allowing normal wrapping behavior around preceding floats.

Common Use Cases and Techniques

Preventing Overlap on Following Sections

The most direct application is placing clear: both on an element immediately following floated content. For example, applying it to a <footer> tag ensures the footer starts cleanly below floated sidebar and content columns rather than overlapping them.

.footer {
  clear: both;
}

The "Clearfix" Pattern

A common side effect of floating is parent collapse, where a container holding only floated children calculates its height as zero. The modern clearfix hack uses the ::after pseudo-element with clear: both on the parent container to force it to expand and contain its floated children automatically.

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

Understanding the clear property is essential for maintaining predictable page flow and fixing layout bugs when working with legacy or float-based CSS architecture.