The web development community has been, for the most part, a spectacularly open place. Many of the best development techniques have emerged through collaborative discussion, iteration, and improvement across blogs and forums. The clearfix hack stands as a prime example of this collective problem-solving approach--a technique that evolved over nearly a decade through community experimentation to solve one of CSS's most persistent layout challenges.
Understanding clearfix is valuable not just for historical context, but because you may encounter it in legacy codebases, and because it demonstrates how browser inconsistencies drove creative solutions in early web development. This evolution showcases the web community's commitment to solving real-world layout problems through shared knowledge and iterative improvement. Our team of web development experts has extensive experience with both legacy CSS techniques and modern layout approaches.
The Problem: When Floats Collapse
When elements are floated, they are removed from the normal document flow. This causes a counterintuitive behavior: parent containers that contain only floated elements collapse to zero height, essentially disappearing from the layout.
This happens because floats were originally designed for text wrapping around images--think newspaper-style layouts where text flows around an embedded image. When developers discovered they could use floats to create multi-column layouts, this "collapsing" behavior became a significant obstacle.
Without clearfix, floated sidebars would overlap with content below them, creating broken layouts that varied across browsers due to inconsistent handling of the float property. This inconsistency meant that what worked perfectly in one browser might completely break in another, requiring developers to test extensively and create workarounds for each platform.
As noted by CSS-Tricks, the float containment problem was one of the most discussed topics in early web development forums, with developers sharing countless solutions before arriving at the clearfix approach that worked reliably across browsers.
2004: The Holly Hack and the Origin of Clearfix
The clearfix technique has its roots in 2004, when Holly Begevin (writing for CommunityMX) created what became known as the "Holly Hack." This technique combined two CSS approaches that worked in the era's dominant browsers--Netscape Navigator and Internet Explorer 4--to solve persistent layout issues.
Begevin discovered that applying height: 1% to floated elements would fix the containment problem in Internet Explorer for Windows, though only because it activated an entirely different browser bug. For Mac compatibility, conditional comments with backslash escapes handled the cross-browser differences. This kind of "bug-fixing-bug" approach was common in early web development, where developers had to exploit browser inconsistencies to achieve consistent layouts.
Tony Aslett's Original Clearfix
In May 2004, Tony Aslett posted to the CSS Creator message board proposing a new approach he called "clearfix" because it centered on clearing floated elements. His approach used the then-novel CSS pseudo-selector :after to automatically clear floats without additional markup.
Aslett's initial version required JavaScript for IE Mac compatibility. Community members pointed him toward the Holly Hack, and by integrating those techniques, the resulting code worked across browsers without JavaScript--thanks to the collaborative nature of early web development forums. This pattern of community-driven improvement would define the clearfix technique for years to come.
The Evolution: Clearfix Through the Years
The clearfix technique went through multiple iterations as browsers evolved and the web community identified better approaches.
2006: Internet Explorer 7 Updates
When IE 7 was released at the end of 2006, the existing clearfix techniques required adjustments. John "Big John" Gallant maintained updates on Position is Everything, incorporating new conditional comments that used zoom: 1 to trigger IE's hasLayout property. The community continued testing across browsers and refining the technique, sharing their findings in forums and personal blogs.
2010: Clearfix Reloaded by YUI
The Yahoo! User Interface Library identified issues with existing clearfix versions--the Holly Hack was now obsolete as IE 5 was deprecated, and margin handling had changed in modern browsers. As documented in the YUI Blog: Clearfix Reloaded, the YUI team added both :before and :after pseudo-selectors to handle all margin scenarios, creating "Clearfix Reloaded." This version addressed the needs of increasingly complex grid layouts that were becoming common in modern web applications.
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */2011: The Micro Clearfix
After years of iterations and community testing, Nicolas Gallagher compiled the various community variations into a much more compact version he called the "Micro Clearfix." As documented in his Micro Clearfix Hack article, this refined technique required just four CSS rules and used display: table instead of height: 0 for better reliability across browsers.
The Micro Clearfix removed unnecessary baggage from older browser support while maintaining compatibility with browsers still in use at the time. It became the definitive version used in production for many years, and remains the recommended approach when clearfix is needed for legacy browser support. The elegance of this solution lies in its simplicity--just four rules that handle edge cases robustly.
This version represented the culmination of nearly seven years of community iteration, from the original Holly Hack through multiple refinements to arrive at a technique that was both minimal and comprehensive.
1/*2 * For modern browsers3 * 1. The space content is one way to avoid an Opera bug when the4 * contenteditable attribute is included anywhere else in the document.5 * 2. The use of `table` rather than `block` is only necessary if using6 * `:before` to contain the top-margins of child elements.7 */8.cf:before,9.cf:after {10 content: " "; /* 1 */11 display: table; /* 2 */12}13 14.cf:after {15 clear: both;16}17 18/*19 * For IE 6/7 only20 * Include this rule to trigger hasLayout and contain floats.21 */22.cf {23 zoom: 1;24}Modern Alternatives to Clearfix
Today's web developers have access to layout techniques that largely eliminate the need for clearfix.
The End of Clearfix?
CSS Grid and Flexbox now handle complex layouts without relying on floats. In 2017, Rachel Andrew questioned the future of clearfix in an article exploring how display: flow-root provides a single-line solution for float containment. New developers rarely need to learn clearfix techniques--though understanding them remains valuable for maintaining older codebases and appreciating the evolution of web standards.
display: flow-root
The display: flow-root property creates a new block formatting context for the container, effectively containing floats without any hack or pseudo-elements. This is the recommended approach for new projects:
.container {
display: flow-root;
}
Supported in all modern browsers, flow-root provides a clean, standards-based solution to the float containment problem that clearfix addressed for over a decade. For projects using modern CSS frameworks like Tailwind CSS, the equivalent is simply adding the flow-root class or using grid/flexbox layout utilities that avoid float issues entirely.
When building modern web applications with Next.js and contemporary CSS, these native solutions should be your first choice. They offer better performance, easier maintenance, and cleaner code that doesn't require explaining historical browser quirks to newer team members.
display: flow-root
Modern CSS solution. Creates block formatting context. Single property, clean syntax. Recommended for new projects.
Micro Clearfix
The definitive 2011 refinement. Four CSS rules, pseudo-element based. Use for legacy browser support.
Flexbox / Grid
Modern layout techniques that avoid floats entirely. Best for new layouts and responsive designs.
overflow: hidden
Creates block formatting context but may clip content. Simple but has limitations with dropdowns and tooltips.
Best Practices for Float Clearing Today
When to Use Modern Techniques vs. Clearfix
New Projects: Use Flexbox or Grid for layout, and flow-root for float containment when needed. These modern approaches are more intuitive and maintainable, and they align with current web standards that prioritize developer experience.
Legacy Projects: Clearfix may still be necessary for older browser support. The Micro Clearfix pattern remains the most reliable cross-browser solution, with extensive testing across multiple browser versions and platforms.
Performance Considerations
Clearfix adds minimal bytes to CSS but requires pseudo-element rendering. The flow-root property creates a new block formatting context efficiently with less overhead. Modern CSS layout techniques (Grid/Flexbox) avoid float-based layouts entirely, eliminating the need for any clearing technique and providing better performance characteristics.
Implementation Guidelines
- Apply clearfix class to parent containers of floated elements
- Use consistent naming conventions across the codebase (
.clearfix,.cf, or.float-clear) - Consider CSS custom properties for reusable patterns that can be adjusted per design system
- Document clearfix usage for team members unfamiliar with the technique
- Consider using W3Schools clearfix tutorial as a reference for junior developers
For teams working on enterprise web applications, establishing clear guidelines around when to use modern techniques versus legacy clearfix patterns helps maintain consistency and reduces technical debt over time. Our web development team can help audit your codebase and migrate legacy CSS patterns to modern, maintainable solutions.
Conclusion
The clearfix hack represents more than just a CSS technique--it embodies the collaborative spirit of web development. Through years of iteration, community testing, and cross-browser compatibility work, developers created a robust solution to a fundamental layout challenge that affected virtually every website built in the mid-2000s.
The technique's evolution from the Holly Hack through Aslett's original clearfix, the YUI refinements, and Nicolas Gallagher's micro clearfix demonstrates how the open web community improves shared knowledge over time. Each iteration addressed real problems encountered by working developers, and the collective experience was shared freely through forums, blogs, and documentation.
While modern CSS has largely eliminated the need for clearfix, understanding its history and implementation remains valuable for any developer working with legacy codebases. The same collaborative problem-solving that created clearfix continues today in CSS Working Group discussions, browser bug reports, and developer communities sharing their experiences with new layout techniques.
As you build modern web applications with Next.js and contemporary CSS, remember that the techniques you use today likely have similar stories of iteration and community collaboration behind them. The clearfix story reminds us that even temporary solutions, refined through community effort, can have lasting impact on how we build for the web. If you're looking to modernize your approach to web development, our team can help you transition from legacy techniques to contemporary best practices.
Frequently Asked Questions About Clearfix
What is clearfix in CSS?
Clearfix is a CSS technique used to make a parent container properly contain its floated children. Without clearfix, containers with only floated elements collapse to zero height, causing layout breakage.
Do I still need clearfix in modern web development?
For new projects using modern CSS layout techniques like Flexbox and CSS Grid, clearfix is rarely needed. However, `display: flow-root` is the modern equivalent when float containment is required. Clearfix remains useful for maintaining older codebases.
What is the difference between clearfix and flow-root?
Clearfix uses pseudo-elements (`:before` and `:after`) to create invisible clearing elements. `flow-root` is a native CSS property that creates a new block formatting context, achieving the same result with cleaner, more maintainable code.
Which clearfix version should I use?
For legacy browser support, use the Micro Clearfix pattern by Nicolas Gallagher. For modern projects, prefer `display: flow-root` or modern layout techniques like Flexbox and CSS Grid that avoid floats entirely.
How does clearfix affect performance?
Clearfix has minimal CSS overhead but requires the browser to render pseudo-elements. The performance impact is negligible for most applications. `flow-root` is equally efficient and requires less code.
What is the simplest clearfix implementation?
The modern, recommended approach is simply: `.container { display: flow-root; }`. For older browser support, the Micro Clearfix uses four CSS rules with `:before` and `:after` pseudo-elements.