Clearfix with ::after

Clearfix Technique

The clearfix hack uses ::after to contain floated children. While Flexbox and Grid made floats largely obsolete for layout, clearfix is still useful for legacy code.

Example

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

/* Modern approach: use flow-root instead */
.container {
  display: flow-root; /* Establishes BFC, contains floats */
}

/* Even better: avoid floats for layout */
.modern-layout {
  display: flex; /* or grid */
}

CSS

Full Editor

Pro Tip

For new projects, use display: flow-root on the container instead of clearfix — cleaner and equally supported.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned