What are CSS clearing techniques?

The short answer

Clearing techniques solve the problem of parent containers collapsing when they contain floated elements. The most common approaches are the clearfix pseudo-element hack, overflow: hidden, and the modern display: flow-root. In most cases today, you do not need clearing at all because flexbox and grid have replaced floats for layouts.

The clearfix (most widely used)

Copy
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

Add the clearfix class to the parent element. The pseudo-element clears the floats, making the parent expand to contain its floated children.

overflow method

Copy
.container {
  overflow: hidden; /* or overflow: auto */
}

This creates a Block Formatting Context that contains the floats. The downside is that overflow: hidden clips any content that extends outside the container.

display: flow-root (modern)

Copy
.container {
  display: flow-root;
}

This was designed specifically to create a BFC for containing floats, with no side effects. It is the cleanest solution but only works in modern browsers.

The clear property

Copy
.footer {
  clear: both;
}

Adding clear: both to an element makes it drop below any preceding floats. This is useful for elements that should appear after floated content.

Do you still need clearing?

With flexbox and grid, floats are rarely used for layouts anymore. You might still encounter them in:

• Older codebases
• Text wrapping around images
• Legacy email templates

Why interviewers ask this

This tests CSS fundamentals. Even though floats are less common now, understanding clearing shows you know how the browser handles document flow. It also comes up when maintaining older codebases.