Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is a clearfix?
A clearfix is a CSS technique used to fix layout issues caused by floating elements. When elements are floated, they are taken out of the normal document flow, which can cause their parent container to collapse or not properly contain them. The clearfix forces the parent container to expand and properly wrap around its floated children.
The Float Collapse Problem
When you float elements inside a container, the container loses awareness of the floated elements' height. This causes the container to collapse, creating layout problems where content overflows outside its intended boundaries.
Example Without Clearfix
The following example demonstrates the overflow issue when floating an image without using clearfix
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
margin-bottom: 10px;
}
.myimg {
float: right;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h2>Demo Heading</h2>
<p>We haven't used clearfix below:</p>
<div>
<img class="myimg" src="/css/images/logo.png" alt="TutorialsPoint" width="150" height="150">
This text flows around the floated image, but notice how the container's blue border doesn't wrap around the entire content because the image is floated.
</div>
<p>This paragraph appears right after the container.</p>
</body>
</html>
The output shows the container collapsing and not properly containing the floated image
Demo Heading We haven't used clearfix below: [Blue bordered box with text, but floated image overflows outside the border] This paragraph appears right after the container.
Clearfix Solution Using overflow: auto
The simplest clearfix method uses overflow: auto on the parent container. This creates a new Block Formatting Context (BFC) that contains the floated elements.
Example
Adding the clearfix class with overflow: auto fixes the containment issue
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
margin-bottom: 10px;
}
.myimg {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h2>Demo Heading</h2>
<p>We have used clearfix below:</p>
<div class="clearfix">
<img class="myimg" src="/css/images/logo.png" alt="TutorialsPoint" width="150" height="150">
Now the container properly contains the floated image. The blue border wraps around all content including the floated image.
</div>
<p>This paragraph appears after the properly contained container.</p>
</body>
</html>
The output shows the container now properly wrapping around the floated content
Demo Heading We have used clearfix below: [Blue bordered box properly containing both text and floated image] This paragraph appears after the properly contained container.
Clearfix Solution Using ::after Pseudo-element
The ::after pseudo-element method is the most robust and widely-used clearfix technique. It adds invisible content after the container that clears the floats, forcing the container to expand around its floated children.
Syntax
.clearfix::after {
content: "";
clear: both;
display: table;
}
Here's how each property works
-
content: ""creates an empty pseudo-element -
clear: bothclears floats on both left and right sides -
display: tablecreates a block-level element that takes up space
Example
Using the ::after pseudo-element provides the most reliable clearfix solution
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
margin-bottom: 10px;
}
.myimg {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h2>Demo Heading</h2>
<p>Using ::after pseudo-element clearfix:</p>
<div class="clearfix">
<img class="myimg" src="/css/images/logo.png" alt="TutorialsPoint" width="150" height="150">
The ::after pseudo-element method is the most reliable clearfix technique. It works across all browsers and doesn't add unwanted scrollbars.
</div>
<p>Content after the cleared container appears in the correct position.</p>
</body>
</html>
The pseudo-element method produces clean, reliable results
Demo Heading Using ::after pseudo-element clearfix: [Blue bordered box cleanly containing both text and floated image] Content after the cleared container appears in the correct position.
Comparison of Clearfix Methods
Here's a comparison of the two main clearfix approaches
| Method | Pros | Cons | Best Use Case |
|---|---|---|---|
overflow: auto |
Simple, one-line solution | May create unwanted scrollbars on some elements | Quick fixes and simple layouts |
::after pseudo-element |
Most reliable, no side effects, works everywhere | Slightly more complex CSS | Production websites and complex layouts |
Modern Alternatives
While clearfix is still useful for legacy support, modern CSS offers better alternatives for layout
-
Flexbox Use
display: flexfor one-dimensional layouts -
CSS Grid Use
display: gridfor two-dimensional layouts -
Flow layout Use
display: flow-rootto create a Block Formatting Context
Example Modern Alternative with Flexbox
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: flex-start;
border: 2px solid blue;
padding: 5px;
}
.flex-text {
flex: 1;
margin-right: 10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h2>Modern Flexbox Alternative</h2>
<div class="flex-container">
<div class="flex-text">
This layout uses flexbox instead of floats, eliminating the need for clearfix entirely. Flexbox provides better control and doesn't suffer from float-related issues.
</ 
383 Views
