Clearfix is a method utilized to ensure that every floated child element is contained within its parent. It allows the parent element to expand in order to accommodate the floated child elements. Without the clearfix, the parent element may collapse.
In layouts with floated elements, it is common to observe that the parent container does not resize to include the child elements properly. This can result in layout disruptions and various visual complications. In this blog, we will explore the clearfix technique and its significance with several examples.
Table of Contents:
- Why Is Clearfix Necessary?
- Ways to Resolve This with Clearfix
- Method 1: Utilizing the Overflow Property
- Method 2: Applying the Clearfix Pseudo-Element
- Method 3: Introducing an Empty Clearfix Element
- Conclusion
Why Is Clearfix Necessary?
When a child element within a parent container becomes floated, the parent container disregards the height of the child. This can result in the following issues:
- The parent container may collapse to a height of zero.
- Non-floated elements might overlap with the parent container.
- The overall layout may be misaligned.
Example without clearfix:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Without Clearfix</title>
<style>
.container {
background-color: lightgray;
border: 2px solid black;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>Output:
Issue: It is evident that the container does not encompass the floated .box elements, resulting in the collapse of the container.
Ways to Resolve This with Clearfix
To solve the issues caused by floated elements, you may utilize methods such as the overflow property, adding an empty clearfix element, or employing the clearfix pseudo-element. Let’s review these methods in detail.
Method 1: Utilizing the Overflow Property
By applying the overflow: hidden property to the parent element, you can ensure that the child element is contained within the parent container. This approach compels floated child elements to be managed properly. Since the float: left property removes elements from the normal flow, the parent container does not consider their height.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clearfix with Overflow</title>
<style>
.container {
background-color: lightgray;
border: 2px solid black;
padding: 10px;
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>Output:
Explanation: The overflow: hidden property allows the creation of a grey container with two blue boxes floated to the left. This technique prevents the parent container from collapsing with the floated child elements.
Method 2: Applying the Clearfix Pseudo-Element
You can implement the ::after pseudo-element to manage the float elements within the parent element. This is often considered the best practice for clearing floats.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clearfix with ::after</title>
<style>
.container::after {
content: "";
display: table;
clear: both;
}
.container {
background-color: lightgray;
border: 2px solid black;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Output:
Explanation: By utilizing ::after, a pseudo-element is created that enables float elements to be contained within the parent container. As a result, the blue floated elements align properly within the parent container.
Method 3: Introducing an Empty Clearfix Element
You…You can utilize an empty <div> along with clear: both at the conclusion of the floated elements to ensure they are contained within the parent element.
Illustration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clearfix with Empty Div</title>
<style>
.clear {
clear: both;
}
.container {
background-color: lightgray;
border: 2px solid black;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="clear"></div>
</div>
</body>
</html>Result:
Clarification: In this example, the class .clear is employed to ensure the child elements are properly housed within the parent div. The clear: both style guarantees that the parent container accommodates the floated blue boxes.
Summary
The methods previously mentioned are employed to make the parent element expand and contain the floated child elements using clearfix. You can apply the overflow property, insert an empty clearfix element, or utilize the clearfix pseudo-element to rectify the floated elements. This enhances the stability and visual appeal of your layout.
What is a Clearfix? – Frequently Asked Questions
The article What is a Clearfix? was first published on Intellipaat Blog.