CSS Clearfix clears floats
CSS Clearfix clears floats
What is Clearfix
CSS Clearfix Clearing floats is a technique that ensures that a container properly contains and includes its floated elements. It prevents layout issues by adding an empty element to the container, which clears the left and right floats, allowing the container to expand and maintain the intended layout.
Clearing floats helps prevent problems such as container collapse, inconsistent heights, overlapping content, and inconsistent alignment.
This chapter explores how clearing floats ensures that a container element properly contains its floated children.
CSS Clear Floats
As mentioned above, CSS clear floats fix overflowing elements within the intended element. You can operate on the following three properties:
- Overflow and Float properties
-
Height property
-
Clear property
The following figure shows a reference diagram for clearing a floating layout:
If an element is taller than its containing element and it is floated, it will overflow outside its container. We can fix this by setting overflow: auto;.
CSS Overflow and Float Properties
Let’s look at an example where an image is taller than its container, causing it to overflow its container’s boundaries and potentially disrupting the layout.
Example
<html>
<head>
<style>
div {
border: 2px solid #f0610e; padding: 5px; background-color: #40a944;
}
.img {
float: right; border: 3px solid #40a944;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<div> <img class="img" src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png" width="200" height="200">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</body>
</overflow: auto;</strong> attribute on the corresponding element to ensure that the image is completely contained within the container. </p>
<p>Let's look at an example:</p>
<pre data-language="HTML"><code class="language-markup line-numbers"><html>
<head>
<style>
div {
border: 2px solid #f0610e; padding: 5px;
background-color: #40a944; overflow: auto;
}
.img {
float: right; border: 3px solid #40a944;
}
</style>
</head>
<body>
<h2>With Clearfix</h2>
<div>
<img class="img" src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png" width="200" height="200">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humor, or randomized words that don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of the text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</body>
</html>
Setting the CSS Height Property
You can also achieve clear floats by setting the height of the <div> element to be similar to the height of the floating image.
Example
Let’s look at an example:
<html>
<head>
<style>
div {
border: 2px solid #f0610e; padding: 10px;
height: 120px; background-color: #40a944;
}
.img {
float: right; border: 3px solid #f0610e;
}
</style>
</head>
<body>
<div>
<img class="img" src="https://coder-cafe.com/wp-content/uploads/2025/09/images/tutimg.png" width="120" height="120">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of the text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</body>
</html>
Setting the CSS Clear Property
CSS The clear property applies to both floated and non-floated elements. It sets whether an element must be moved below (cleared) a preceding floated element.
The Clear property can have one of the following values:
- none: is a keyword that indicates the element will not move down to clear previously floated elements.
-
left: is a keyword that indicates the element will move down to clear a left float.
-
right: is a keyword that indicates the element will move down to clear a right float.
-
both: is a keyword that indicates the element will move down to clear both left and right floats.
-
inline-start: is a keyword that indicates the element will move down to clear floats at the beginning of its containing block, i.e., a left float on LTR scripts and a right float on RTL scripts.
-
inline-end: is a keyword that indicates that the element will be moved down to clear the float at the end of its containing block, i.e., right float on LTR scripts and left float on RTL scripts.
Set Clear to Left
The following example demonstrates a clearfix using the clear:left property:
<html>
<head>
<style>
.main {
border: 1px solid black; padding: 10px;
}
.left {
border: 1px solid black; clear: left;
}
.aqua {
float: left; margin: 0; background-color: aqua; color: #000; width: 20%;
}
.pink {
float: left; margin: 0; background-color: pink; width: 20%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<div class="main">
<p class="aqua">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humor, or randomized words which don't look even slightly believable.</p>
<p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="left">This paragraph clears left.</p>
</div>
</body>
</html>
Set Clear to right
The following example demonstrates using the clear:right property:
<html>
<head>
<style>
.main {
border: 1px solid black; padding: 10px;
}
.right {
border: 1px solid black; clear: right;
}
.aqua {
float: right; margin: 0; background-color: aqua; color: #000; width: 20%;
}
.pink {
float: right; margin: 0; background-color: pink; width: 20%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<div class="main">
<p class="aqua">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable.</p>
<p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="right">This paragraph clears right.</p>
</div>
</body>
</html>
Clear Float Effect
The following example demonstrates how to use the clear:both property to achieve a clear float effect:
<html>
<head>
<style>
.main {
border: 1px solid black; padding: 10px;
}
.both {
border: 1px solid black; clear: both;
}
.aqua{
float: left; margin: 0; background-color: aqua; color: #000; width: 20%;
}
.pink {
float: right; margin: 0; background-color: pink; width: 20%;
}
p {
width: 45%;
}
</style>
</head>
<body>
<div class="main">
<p class="aqua">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable. </p>
<p class="pink">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="both">This paragraph clears both.</p> </div>
</body>
</html>