CSS clearfix

The CSS clearfix is a technique used to fix issues related to clearing floats within a container. When floating elements are placed inside a container, the container’s height may collapse, causing it to not enclose the floated elements as expected. The clearfix technique solves this problem and ensures that the container’s height is properly adjusted to enclose the floated content.

To implement the clearfix technique, you can use the following CSS code:

.container::after {
  content: "";
  display: table;
  clear: both;
}

In this code, ::after is a pseudo-element that is appended after the content of the .container element. It is given an empty string content (content: "";), effectively making it invisible. The display: table; property is used to create a new block formatting context, and clear: both; ensures that the pseudo-element clears any floated elements that come before it.

Here’s an example of how to use the clearfix technique:

HTML:

<div class="container">
  <div class="float-left">Floating Element 1</div>
  <div class="float-left">Floating Element 2</div>
</div>

CSS:

.container::after {
  content: "";
  display: table;
  clear: both;
}

.float-left {
  float: left;
}

In this example, we have a container <div> with two floated child <div> elements. Without the clearfix, the container’s height would collapse, and the floated elements might overflow or affect the layout of other elements on the page. However, by applying the clearfix to the container, it will properly enclose the floated elements, and its height will adjust accordingly.

You can use the clearfix technique whenever you encounter issues with clearing floats and want to ensure that the containing element behaves as expected. It’s a widely used method to avoid layout problems caused by floated elements, especially in scenarios like creating multi-column layouts or image galleries where elements are floated side by side.