What is Clearfix in CSS: Simple Explanation and Usage

In CSS, clearfix is a technique used to fix layout problems caused by floated elements. It forces a container to wrap around its floated children by clearing the float, ensuring the container's height includes those children.

How It Works

When you float elements inside a container, the container may collapse because it ignores the height of those floated elements. Imagine a box holding balloons that are tied and floating above it; the box looks empty because it doesn't stretch to hold the balloons.

The clearfix technique adds a hidden element or uses CSS pseudo-elements to clear the float. This makes the container recognize the height of its floated children, so it stretches properly like a box that grows to hold the balloons inside.

Example

This example shows a container with two floated boxes inside. Without clearfix, the container height collapses. With clearfix, the container wraps around the floated boxes.

css

/* Clearfix CSS */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* Styles for demonstration */
.container {
  border: 2px solid #4CAF50;
  padding: 10px;
  width: 300px;
  margin-bottom: 20px;
}
.box {
  float: left;
  width: 140px;
  height: 100px;
  background-color: #2196F3;
  color: white;
  line-height: 100px;
  text-align: center;
  margin-right: 10px;
}

/* Without clearfix container */
.container.no-clearfix {
  background-color: #f0f0f0;
}

/* With clearfix container */
.container.clearfix {
  background-color: #e0ffe0;
}

Output

<div class="container no-clearfix">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>
<div class="container clearfix">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

When to Use

Use clearfix when you have floated elements inside a container and the container's height collapses, causing layout issues like overlapping or background problems. This often happens in navigation bars, card layouts, or any design where elements are floated side by side.

Clearfix helps keep your layout clean and predictable without adding extra empty elements in your HTML. It is a simple fix for common float-related problems in CSS.

Key Points

• Clearfix fixes container height collapse caused by floated children.
• It uses CSS pseudo-elements ::after to clear floats without extra HTML.
• Helps maintain proper layout and background styling.
• Commonly used in navigation bars, grids, and floated layouts.

Key Takeaways

Clearfix makes containers wrap around floated elements by clearing the float.

It uses a CSS pseudo-element (::after) with clear: both to fix layout issues.

Use clearfix to prevent container collapse when using floats in layouts.

Clearfix avoids adding extra empty elements in your HTML for clearing floats.