Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><code>.clearfix</code> is defined in <a href="https://github.com/twbs/bootstrap/blob/v2.3.0/less/mixins.less"><code>less/mixins.less</code></a>. Right above its definition is a comment with a link to this article:</p> <p><a href="http://nicolasgallagher.com/micro-clearfix-hack/">A new micro clearfix hack</a></p> <p>The article explains how it all works.</p> <p><strong>UPDATE:</strong> Yes, link-only answers are bad. I knew this even at the time that I posted this answer, but I didn't feel like copying and pasting was OK due to copyright, plagiarism, and what have you. However, I now feel like it's OK since I have linked to the original article. I should also mention the author's name, though, for credit: Nicolas Gallagher. Here is the meat of the article (note that "Thierry’s method" is referring to <a href="http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/">Thierry Koblentz’s “clearfix reloaded”</a>):</p> <blockquote> <p>This “micro clearfix” generates pseudo-elements and sets their <code>display</code> to <code>table</code>. This creates an <a href="http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes">anonymous table-cell</a> and a new block formatting context that means the <code>:before</code> pseudo-element prevents top-margin collapse. The <code>:after</code> pseudo-element is used to clear the floats. As a result, there is no need to hide any generated content and the total amount of code needed is reduced.</p> <p>Including the <code>:before</code> selector is <em>not</em> necessary to clear the floats, but it <strong>prevents</strong> top-margins from collapsing in modern browsers. This has two benefits:</p> <ul> <li><p>It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g., <code>overflow:hidden</code></p></li> <li><p>It ensures visual consistency with IE 6/7 when <code>zoom:1</code> is applied.</p></li> </ul> <p><strong>N.B.</strong>: There are circumstances in which IE 6/7 will not contain the bottom margins of floats within a new block formatting context. Further details can be found here: <a href="http://nicolasgallagher.com/better-float-containment-in-ie/">Better float containment in IE using CSS expressions</a>.</p> <p>The use of <code>content:" "</code> (note the space in the content string) avoids an <a href="http://codepen.io/anon/full/9454/4">Opera bug</a> that creates space around clearfixed elements if the <code>contenteditable</code> attribute is also present somewhere in the HTML. Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is to use <code>font:0/0 a</code>.</p> <h1>Legacy Firefox</h1> <p>Firefox &lt; 3.5 will benefit from using Thierry’s method with the addition of <code>visibility:hidden</code> to hide the inserted character. This is because legacy versions of Firefox need <code>content:"."</code> to avoid extra space appearing between the <code>body</code> and its first child element, in certain circumstances (e.g., <a href="http://jsfiddle.net/necolas/K538S/">jsfiddle.net/necolas/K538S/</a>.)</p> <p>Alternative float-containment methods that create a new block formatting context, such as applying <code>overflow:hidden</code> or <code>display:inline-block</code> to the container element, will also avoid this behaviour in legacy versions of Firefox.</p> </blockquote>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload