davidbgk
/
larlet-fr-david-cache

title: Clearfix: A Lesson in Web Development Evolution
url: https://thehistoryoftheweb.com/postscript/clearfix-a-lesson-in-web-development-evolution/
hash_url: a76c269e9283669744c2c2b0a58e07e2

<img src="https://thehistoryoftheweb.com/wp-content/uploads/2018/08/desired-result-800x400.png?f11687&amp;f11687" class="attachment-large size-large wp-post-image" alt="A demonstration of the layout that clearfix is trying to solve, sidebar on the left, content on the right" srcset="https://thehistoryoftheweb.com/wp-content/uploads/2018/08/desired-result-800x400.png 800w, https://thehistoryoftheweb.com/wp-content/uploads/2018/08/desired-result-300x150.png 300w, https://thehistoryoftheweb.com/wp-content/uploads/2018/08/desired-result-768x384.png 768w, https://thehistoryoftheweb.com/wp-content/uploads/2018/08/desired-result.png 900w" sizes="(max-width: 800px) 100vw, 800px"/><h2> Clearfix: A Lesson in Web Development Evolution</h2><p>The web community has, for the most part, been a spectacularly open place. As such, a lot of the best development techniques happen right out in the open, on blogs and in forums, evolving as they’re passed around and improved. I thought it might be fun (and fascinating) to actually follow this creative exchange all the way through. To take a look at a popular CSS trick, the clearfix, and find out exactly how a web design technique comes to be.</p><p><a href="https://css-tricks.com/snippets/css/clear-fix/">The clearfix</a>, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout. All you might be trying to do is position a sidebar to the left of your main content block, but the result would be two elements that overlap and collapse on each other. To complicate things further, the bug is inconsistent across browsers. The clearfix was invented to solve all that.</p> <figure id="attachment_2589" class="wp-caption alignnone"><img class="size-full wp-image-2589" src="https://thehistoryoftheweb.com/wp-content/uploads/2018/08/clear-box.gif?f11687&amp;f11687" alt=""/><figcaption class="wp-caption-text">An early illustration of the issue from Position is Everything</figcaption></figure><p>But to understand the clearfix, you have to go back even further, to the 2004 and a particular technique called the Holly hack.</p><h3 id="article-header-id-0" class="has-header-link">2004: The Holly Hack and the origin of Clearfix</h3><p>The Holly hack is named for its creator, Holly Begevin, a developer and blogger at CommunityMX. The Holly hack combines two different CSS techniques that worked in the days of Netscape Navigator and Internet Explorer (IE) 4 to solve some layout issues. Begevin noticed that if you apply a height of just 1% to each of the floated elements in the above scenario, the problem would actually fix itself (and only because it activated an entirely different bug) in Internet Explorer for Windows.</p><p><img class="alignnone size-full wp-image-2590" src="https://thehistoryoftheweb.com/wp-content/uploads/2018/08/desired-result.png?f11687&amp;f11687" alt="A demonstration of the layout that clearfix is trying to solve, sidebar on the left, content on the right" srcset="https://thehistoryoftheweb.com/wp-content/uploads/2018/08/desired-result.png 900w, https://thehistoryoftheweb.com/wp-content/uploads/2018/08/desired-result-300x150.png 300w, https://thehistoryoftheweb.com/wp-content/uploads/2018/08/desired-result-768x384.png 768w, https://thehistoryoftheweb.com/wp-content/uploads/2018/08/desired-result-800x400.png 800w" sizes="(max-width: 900px) 100vw, 900px"/></p><p>Unfortunately, the 1% trick didn’t work on a Mac. For that, <a href="https://web.archive.org/web/20150324181023/http://www.communitymx.com/content/article.cfm?page=2&amp;cid=C37E0">Begevin added a conditional comment</a> which used a backslash inside of her CSS, which strangely enough, blocked individual CSS rules from IE for Mac in the old days. The result was a CSS trick that looked like this:</p><pre class=" language-css"><code class=" language-css"><span class="token comment" spellcheck="true">/* Hides from IE5-mac \*/</span>
<span class="token selector">* html <span class="token class">.buggybox</span> </span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">1%</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">/* End hide from IE5-mac */</span></code></pre><p>Odd, I know, but it only gets more complicated.</p><p>That same year, in May, there were a few more browsers to deal with, and not all of them could be patched with one line of CSS. Tony Aslett <a href="https://csscreator.com/attributes/containedfloat.php">posted a new thread to his message board</a>, CSS Creator, proposing a new approach. He called the trick a clearfix because it centered around clearing the floated elements to fix the issue.</p><p>Aslett’s approach took advantage of what were, at the time, still very new CSS pseudo-selectors (specifically <code>:after</code>) to automatically clear out two floated elements. There was one pretty massive drawback in Aslett’s first version of the clearfix. Having never heard of the Holly Hack, Aslett’s code required a bit of JavaScript to fix issues that were specifically popping up on IE for Mac. In those days, JavaScript was a relatively untested technology, and relying on it in such a fundamental way was less than ideal.</p><div class="post-reading"><aside class="post-reading__wrap"><h4 class="post-reading__title">Love History? Love the web?</h4><p>This article is part of an ongoing series diving deep into the history of the World Web Web. I've been doing this for over a year now, fueled by nothing more than a roaming curiousity. Each new piece of that history I put together has been surprising and sometimes strange and sometimes wonderful and always fascinating.</p><p>As I dig through the web's past, I send out a weekly newsletter with a story plucked straight from my research (just like this one). If you sign up below, you can get the new story, each week, right when it comes out.</p><div class="email-octopus-form-wrapper mc_embed_signup"><h2 class="email-octopus-heading">Subscribe to The History of the Web</h2><p class="email-octopus-success-message"/><p class="email-octopus-error-message"/></div> </aside></div><p>Thankfully, the web is a place of iteration, and one message board user pointed Aslett in the direction of the aforementioned Holly Hack. By sprinkling in Begevin’s conditional comment, <a href="https://csscreator.com/attributes/containedfloat.php">Aslett was able to make his code work</a> in just about every browser with no JavaScript at all.</p><pre class=" language-css"><code class=" language-css"><span class="token selector"><span class="token class">.floatcontainer</span><span class="token pseudo-element">:after</span> </span><span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"."</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
  <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* Mark Hadley's fix for IE Mac */</span>
<span class="token selector"><span class="token class">.floatcontainer</span> </span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* Hides from IE Mac \*/</span>
<span class="token selector">* html <span class="token class">.floatcontainer</span> </span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">1%</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.floatcontainer</span></span><span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">/* End Hack */</span></code></pre><p>If you want to pick apart an important slice of web history and innovation, the <a href="https://csscreator.com/node/1667">discussion that followed Aslett’s post about clearfix</a> is a great place to start. One by one, people began to experiment with the new technique, testing it in obscure browsers and devices. When they were done, they’d post their results to the message thread, sometimes alongside a helpful tweak.</p><p>For example, the user <em>zulaica</em> pointed out that in Mozilla browsers, the bottom border of floated elements had to be explicitly defined. User <em>pepejeria</em> noticed that you could leave out the dot from content, and user <em>co2</em> tested the clearfix in the very first version of Apple’s Safari browser. Each time, Aslett would update his code a bit until, after more than a few rapid iterations, the clearfix was ready and, thanks to the community, pretty darn bulletproof.</p><h3 id="article-header-id-1" class="has-header-link">2006: Clearfix gets an update</h3><p>But browsers kept on advancing. Some of the more quirky bits of the clearfix code worked because of bugs that were built into older browsers. As browsers patched those bugs, in brand new versions, the clearfix stopped working. When IE 7 came out at the end of 2006, a few adjustments to the technique were needed to make it work.</p><p>Fortunately, John “Big John” Gallant was maintaining a page on his blog <em>Position is Everything</em> with an up to date version of the clearfix. After getting some feedback from his readers, <a href="http://www.positioniseverything.net/easyclearing.html">Gallant updated his blog</a> to reflect a few new fixes for IE 7 using a new kind of conditional comment that would work inside of Internet Explorer.</p><pre class=" language-html"><code class=" language-markup language-html"><span class="token tag"><span class="token punctuation">&lt;</span>style <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token style language-css">

  <span class="token selector"><span class="token class">.clearfix</span><span class="token pseudo-element">:after</span> </span><span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"."</span><span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
    <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

</span><span class="token tag"><span class="token punctuation">&lt;/</span>style<span class="token punctuation">&gt;</span></span><span class="token comment" spellcheck="true">&lt;!-- main stylesheet ends, CC with new stylesheet below... --&gt;</span>

<span class="token comment" spellcheck="true">&lt;!--[if IE]&gt;
&lt;style type="text/css"&gt;
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
  }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
&lt;/style&gt;
&lt;![endif]--&gt;</span></code></pre><p>And once again, users took to their own browsers to test out the latest code to ensure it worked everywhere. And once again, for a time, it did.</p><h3 id="article-header-id-2" class="has-header-link">2010: Clearfix Reloaded</h3><p>In fact, this iteration of the clearfix would last until about 2010, when the team at the Yahoo! User Interface Library (YUI) noticed a few issues with the clearfix. The Holly Hack, for instance, was now long gone (IE 5 was but a distance memory), and after switching the box model, margins were handled a bit differently by modern browsers.</p><p>But the folks at YUI still needed to line up one element next to another. In fact, the need had only increased, as designers experimented with more advanced grid layouts. In 2010, there were very little options for grid layout, so clearfix had to work. They eventually came up with a few additional tweaks to the CSS ruleset, most notably by taking of advantage of both available pseudo-selectors (<code>:before</code> and <code>:after</code>), to clear out any margins. They posted their new take to their own blog and called it <a href="https://yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/">“clearfix reloaded.”</a></p><pre class=" language-css"><code class=" language-css"><span class="token selector"><span class="token class">.clearfix</span><span class="token pseudo-element">:before</span>,
<span class="token class">.clearfix</span><span class="token pseudo-element">:after</span> </span><span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"."</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.clearfix</span><span class="token pseudo-element">:after</span> </span><span class="token punctuation">{</span> <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.clearfix</span> </span><span class="token punctuation">{</span> <span class="token property">zoom</span><span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment" spellcheck="true">/* IE &lt; 8 */</span></code></pre><h3 id="article-header-id-3" class="has-header-link">2011: The Micro Clearfix</h3><p>But even when it was published in 2010, clearfix reloaded brought with it some unnecessary baggage from older browsers. The height equals 0 trick wasn’t really a requirement anymore, and in fact, the trick was a lot more reliable when <code>display: table</code> was used instead. People began swapping various variations on the technique on Twitter and on blogs. About a year after the release of clearfix reloaded, developer Nicolas Gallagher compiled these variations into a much more compact version of the hack, which he appropriately labeled the <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a>.</p><p>After years of back and forth and slight adjustments, the clear fix now required just four CSS rules:</p><pre class=" language-css"><code class=" language-css"><span class="token comment" spellcheck="true">/*
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *  contenteditable attribute is included anywhere else in the document.
 *  Otherwise it causes space to appear at the top and bottom of elements
 *  that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 * `:before` to contain the top-margins of child elements.
 */</span>
<span class="token selector"><span class="token class">.cf</span><span class="token pseudo-element">:before</span>,
<span class="token class">.cf</span><span class="token pseudo-element">:after</span> </span><span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" "</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* 1 */</span>
  <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* 2 */</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.cf</span><span class="token pseudo-element">:after</span> </span><span class="token punctuation">{</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */</span>
<span class="token selector"><span class="token class">.cf</span> </span><span class="token punctuation">{</span>
  <span class="token property">zoom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre><h3 id="article-header-id-4" class="has-header-link">The End of Clearfix?</h3><p>These days, almost 15 years after it was first proposed, the clearfix is losing a bit of relevance. <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS Grid</a> and <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox</a> are filling in the gaps for advanced layout on the web. In January of 2017, Rachel Andrew wrote an article for her blog titled <a href="https://www.rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/">“The end of the clearfix hack?”</a> In it, she describes a way to replace the clearfix hack with a single line of code using a new display mode rule known as <code>flow-root</code>.</p><pre class=" language-css"><code class=" language-css"><span class="token selector"><span class="token class">.container</span> </span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flow-root<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre><p>We are approaching the day when clearfix will no longer be necessary at all.</p><p>Even without <code>flow-root</code>, there’s lots of ways to make a grid these days. If you were just starting out on the web, there’d be little reason to even learn about it. That’s a good thing! From the beginning it was always meant as a workaround to make the best of what was available. The irony being that without the dedication and experimentation of the developers who hacked away on the clearfix for so many years, we wouldn’t have the tools today to never have to rely on it again.</p>