Selected Reading
Q&A

CSS - Clearfix

What is a Clearfix?

CSS Clearfix is a technique to ensure that a container properly encloses and contains floated elements within it. It prevents layout issues by adding an empty element to the container, which clears both left and right floats, allowing the container to expand and maintain its intended layout.

Clearfix helps to prevent the problems like container collapse, uneven heights, overlapping content, inconsistent alignment.

This chapter will explore, how the clearfix technique ensures that container elements properly contains its floated child elements.

CSS Clearfix

As mentioned abbve ,the CSS clearfix fixes the overflow elements from the desired element. The following three properties can be worked upon for this:

Overflow and Float Property
Height Property
Clear Property

The following diagram demonstrates the clearfix layout for reference:

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. We can fix this issue by setting overflow: auto;

CSS Clear - Demo

Try to select different values for CSS clear property and see the result in right box.

Overflow and Float Property

Let us see an example where an image is larger than its container's height, causing the image to extend beyond the boundaries of its container 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="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 randomised 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>
</html>

To resolve this overflow, we can set overflow: auto; property to the corresponding element, ensuring that the image is fully contained within the container.

Let us see an example:

<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="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 randomised 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>
</html>

Setting CSS Height Property

You can also acheive clearfix by setting the height of <div> element similar to the height of the floated image.

Example

Let us see 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="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 randomised 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>
</html>

Setting CSS Clear Property

The CSS Clear property applies to floating and non-floating elements. This sets whether an element must be moved below (cleared) floating elements that precede it.

The Clear property can have one of the following values:

none: Is a keyword indicating that the element is not moved down to clear past floating elements.
left: Is a keyword indicating that the element is moved down to clear past left floats.
right: Is a keyword indicating that the element is moved down to clear past right floats.
both: Is a keyword indicating that the element is moved down to clear past both left and right floats.
inline-start: Is a keyword indicating that the element is moved down to clear floats on start side of its containing block, that is the left floats on ltr scripts and the right floats on rtl scripts.
inline-end: Is a keyword indicating that the element is moved down to clear floats on end side of its containing block, that is the right floats on ltr scripts and the left floats on rtl scripts.

Setting Clear to Left

Following example demonstrates clearfix using 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 humour, or randomised 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>

Setting Clear to Right

Following example demonstrates clearfix using 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 randomised 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>

Setting Clear to Both

Following example demonstrates clearfix using clear:both property:

<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 randomised 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>