.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
displaytotable. This creates an anonymous table-cell and a
new block formatting context that means the:beforepseudo-element
prevents top-margin collapse. The:afterpseudo-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
:beforeselector 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:hiddenIt ensures visual consistency with IE 6/7 when
zoom:1is 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
contenteditableattribute is also present somewhere in the HTML.
Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is
to usefont:0/0 a.Legacy Firefox
Firefox < 3.5 will benefit from using Thierry’s method with the
addition ofvisibility:hiddento hide the inserted character. This
is because legacy versions of Firefox needcontent:"."to avoid
extra space appearing between thebodyand 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 applyingoverflow:hiddenor
display:inline-blockto the container element, will also avoid this
behaviour in legacy versions of Firefox.