What methods of ‘clearfix’ can I use in CSS?

In modern CSS, the most common “clearfix” pattern uses a pseudo-element with clear: both; to force the container to expand around floated children. For example:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

This ensures that any floats within the .clearfix container don’t overflow outside its bounds. Below are the main clearfix methods you’ll see in practice—older or newer.

1. Pseudo-Element (Modern Clearfix)

.clearfix::after {
  content: "";
  display: table; /* or block, typically table works well for older IEs */
  clear: both;
}

• How It Works:
  1. The ::after pseudo-element is added inside the container, after all the floated children.
  2. clear: both; makes this pseudo-element sit below any floats.
  3. display: table; or display: block; ensures the pseudo-element has some box behavior.
• Pros:
  • Works in modern browsers (and even older IE if you use display: table;).
  • Doesn’t require extra markup.
• Cons:
  • Must remember to add the .clearfix class on any container needing to wrap floats.

2. Overflow Method

.container {
  overflow: auto;  /* or hidden, or any non-visible overflow setting */
}

• How It Works:
  • By setting overflow to a value other than visible (e.g., auto or hidden), the browser expands the container around its floated children.
• Pros:
  • Very simple to apply: no extra pseudo-elements or special classes.
  • Often used if you’re okay with clipped or auto-scrolling content.
• Cons:
  • If you have intentionally visible overflow or absolutely positioned elements that need to be visible outside the container, overflow: hidden; or auto; might cause issues.
  • Not always suitable if you want an actual scroll or visible overflow behavior.

3. Older “Micro Clearfix Hack”

An older hack combined the pseudo-element approach with an IE7/IE6 fix:

.clearfix {
  *zoom: 1; /* IE 6/7 hack to create hasLayout, needed for float clearing */
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

• Why It Existed:
  • In IE6/7, hasLayout was a concept that forced elements to enclose floats. Using zoom: 1; triggered hasLayout.
• Modern Relevance:
  • Largely obsolete for modern browsers; these old IE versions are mostly out of date.
  • You might still see it in old codebases or frameworks supporting ancient IE.

4. Using “Float: None” or “Clear: Both” on Next Sibling

You can also force a float to be cleared by applying clear: both; on a subsequent sibling:

.floated-box {
  float: left;
  width: 200px;
  height: 100px;
  background: #ccc;
}

/* The next sibling if you want to push it below floated elements */
.next-box {
  clear: both;
  background: #eee;
}

• Pros:
  • Quick if you only need to clear a single float in a simple layout.
• Cons:
  • Not a robust solution if you have multiple floats or want the container to expand automatically.

5. Modern Alternatives (Flex or Grid Layout)

Tip: Sometimes, you don’t need floats at all for layout. Instead, use Flexbox or Grid, which handle alignment and wrapping without needing float-based “clearfix” solutions.

.container {
  display: flex;
  flex-wrap: wrap;
  /* ... */
}
.item {
  flex: 0 0 auto; /* or flex-basis, etc. for layout */
}

• No “clearfix” needed because floats are not used.

Summary

1. Pseudo-Element Clearfix (most common today):

   .clearfix::after {
     content: "";
     display: block; /* or table */
     clear: both;
   }

2. Overflow Method:

   .container {
     overflow: auto; /* or hidden */
   }

3. Old “Micro Clearfix”:

   .clearfix {
     *zoom: 1; /* old IE fix */
   }
   .clearfix::after {
     content: "";
     display: table;
     clear: both;
   }

4. Use CSS Layouts Without Floats (Flexbox/Grid).

Key Takeaway
In modern practice, either use the pseudo-element clearfix or overflow method to contain floats—if you still need floats at all. For new layouts, consider Flexbox or Grid to avoid float-based layout and the need for clearfix hacks entirely.