Clear and Clearfix

You will be able to stop floated elements from wrapping around following content and make a parent element expand to contain its floated children using clear and a clearfix.

What it is

A floated element is taken out of normal flow, so its parent may collapse to zero height and later block elements may wrap around it. The clear property tells an element to move below preceding floats. Its common values are none, left, right, and both. A clearfix is a small CSS pattern that adds an invisible pseudo-element after a container’s content and clears the floats, forcing the container to grow around its floated children.

Related terms: float, clear, ::after, block formatting context, legacy float layout.

Why it matters

• Keeps a floated image from overlapping the next paragraph.
• Makes a floated column layout’s parent show its border, background, or height.
• Prevents later content from sliding up beside floated boxes.
• Provides a safe fix for older float-based grids without changing HTML.

Syntax or steps

The smallest useful pattern is to clear after the container’s children:

.row::after {
  content: "";
  display: table;
  clear: both;
}

1. Select the parent that contains floated children.
2. Add an ::after pseudo-element.
3. Give it content: "" so it is generated.
4. Use clear: both so it moves below left and right floats.

Example

<style>
.row {
  border: 2px solid #333;
}

.box {
  float: left;
  width: 33.333%;
  background: #eef;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}
</style>

<div class="row">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
</div>
<p>This paragraph should start below the boxes.</p>

Part by part: .box floats three children left. Without the clearfix, .row may have no height and the paragraph may appear beside the boxes. The .row::after rule creates an invisible element after the boxes. Because it clears both floats, it is forced below them, and the parent expands to include it.

Common mistakes

• Applying clear to a floated child instead of to the element that should move below it.
• Forgetting content: ""; without it, the pseudo-element is not generated.
• Using overflow: hidden as the only fix and accidentally clipping dropdowns or shadows.
• Expecting a clearfix to work when the children are absolutely positioned rather than floated.

When to use it

Practice

Guided exercise: Create a .row with three floated .box elements and a following paragraph. Add the clearfix rule and confirm the row border wraps the boxes and the paragraph starts below them.

Challenge: Replace the clearfix with .row { display: flow-root; }. Expected result: the same containing behavior without an ::after pseudo-element. Hint: this creates a new block formatting context.

Quick check

Question: Does clear: both on a paragraph make its parent expand around floated children?

Answer: No. It moves the paragraph below the floats, but the parent still needs a clearfix or another containing mechanism.

Summary

Clear controls where an element sits relative to preceding floats, while a clearfix makes a parent contain floated children by adding a clearing pseudo-element. Use it for legacy float layouts; prefer display: flow-root, flexbox, or grid for modern layouts.