Understanding Bootstrap's clearfix class

clearfix, less, twitter-bootstrap

Solution

`.clearfix` is defined in `less/mixins.less`. Right above its definition is a comment with a link to this article:

A new micro clearfix hack

The article explains how it all works.

UPDATE: 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 Thierry Koblentz’s “clearfix reloaded”):

This “micro clearfix” generates pseudo-elements and sets their `display` to `table`. This creates an anonymous table-cell and a new block formatting context that means the `:before` pseudo-element prevents top-margin collapse. The `:after` 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.

Including the `:before` selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. This has two benefits:

It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g., `overflow:hidden`

It ensures visual consistency with IE 6/7 when `zoom:1` is applied.

N.B.: 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: Better float containment in IE using CSS expressions.

The use of `content:" "` (note the space in the content string) avoids an Opera bug that creates space around clearfixed elements if the `contenteditable` attribute is also present somewhere in the HTML. Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is to use `font:0/0 a`.

Legacy Firefox

Firefox < 3.5 will benefit from using Thierry’s method with the addition of `visibility:hidden` to hide the inserted character. This is because legacy versions of Firefox need `content:"."` to avoid extra space appearing between the `body` and its first child element, in certain circumstances (e.g., jsfiddle.net/necolas/K538S/.)

Alternative float-containment methods that create a new block formatting context, such as applying `overflow:hidden` or `display:inline-block` to the container element, will also avoid this behaviour in legacy versions of Firefox.

Problem

Original source