What does the clearfix class do in css?

Question

I've seen div tags use a clearfix class when it's child divs use the float property. The clearfix class looks like this:

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

I found that if I don't use clearfix when I use the bottom-border property, the border would show above the child divs. Can someone explain what the clearfix class does? Also, why are there two display properties? That seems very strange to me. I am especially curious about what the content:'.' means.

Thanks,G

Solution 1

How floats work

When floating elements exist on the page, non-floating elements wrap around the floating elements, similar to how text goes around a picture in a newspaper. From a document perspective (the original purpose of HTML), this is how floats work.

float vs display:inline

Before the invention of display:inline-block, websites use float to set elements beside each other. float is preferred over display:inline since with the latter, you can't set the element's dimensions (width and height) as well as vertical paddings (top and bottom) - which floated elements can do since they're treated as block elements.

Float problems

The main problem is that we're using float against its intended purpose.

Another is that while float allows side-by-side block-level elements, floats do not impart shape to its container. It's like position:absolute, where the element is "taken out of the layout". For instance, when an empty container contains a floating 100px x 100px <div>, the <div> will not impart 100px in height to the container.

Unlike position:absolute, it affects the content that surrounds it. Content after the floated element will "wrap" around the element. It starts by rendering beside it and then below it, like how newspaper text would flow around an image.

Clearfix to the rescue

What clearfix does is to force content after the floats or the container containing the floats to render below it. There are a lot of versions for clear-fix, but it got its name from the version that's commonly being used - the one that uses the CSS property clear.

Examples

Here are several ways to do clearfix , depending on the browser and use case. One only needs to know how to use the clear property in CSS and how floats render in each browser in order to achieve a perfect cross-browser clear-fix.

What you have

Your provided style is a form of clearfix with backwards compatibility. I found an article about this clearfix. It turns out, it's an OLD clearfix - still catering the old browsers. There is a newer, cleaner version of it in the article also. Here's the breakdown:

• The first clearfix you have appends an invisible pseudo-element, which is styled clear:both, between the target element and the next element. This forces the pseudo-element to render below the target, and the next element below the pseudo-element.

• The second one appends the style display:inline-block which is not supported by earlier browsers. inline-block is like inline but gives you some properties that block elements, like width, height as well as vertical padding. This was targeted for IE-MAC.

• This was the reapplication of display:block due to IE-MAC rule above. This rule was "hidden" from IE-MAC.

All in all, these 3 rules keep the .clearfix working cross-browser, with old browsers in mind.

Solution 2

When an element, such as a div is floated, its parent container no longer considers its height, i.e.

<div id="main">
  <div id="child" style="float:left;height:40px;"> Hi</div>
</div>

The parent container will not be be 40 pixels tall by default. This causes a lot of weird little quirks if you're using these containers to structure layout.

So the clearfix class that various frameworks use fixes this problem by making the parent container "acknowledge" the contained elements.

Day to day, I normally just use frameworks such as 960gs, Twitter Bootstrap for laying out and not bothering with the exact mechanics.

Can read more here

http://www.webtoolkit.info/css-clearfix.html

Solution 3

clearfix is the same as overflow:hidden. Both clear floated children of the parent, but clearfix will not cut off the element which overflow to it's parent. It also works in IE8 & above.

There is no need to define "." in content & .clearfix. Just write like this:

.clr:after {
    clear: both;
    content: "";
    display: block;
}

HTML

<div class="parent clr"></div>

Read these links for more

http://css-tricks.com/snippets/css/clear-fix/,

What methods of ‘clearfix’ can I use?

Comments

[takteek]

Won't the final display:block override display:inline-block on all browsers, including those that support inline-block?

[Joseph]

edited my answer. it's not for the last element. it's for an empty element after it. sometimes you see others add <div class="clearfix"></div> after the last floated element to emulate the "blank content" of :after. this is for older browsers.

[Gnijuohz]

Your explanation is well detailed.But why dot means blank?

[Joseph]

it's just dummy content, hence "blank". you won't really see it because of height:0 and visibility:hidden. it does not impart anything in the design other than the clearing.

[Gnijuohz]

Thanks!I use Bootstrap too...

[w3uiguru]

@Joseph i agree with your answer but i am curious to know the structure (HTML) on which above(clearfix) class applied. Can you elaborate so any one who read this question in future can easily understand. Please and thanks in advance.

[Joseph]

updated my answer. check the fiddle and the article for more details.

[Yaron U.]

I must add on top of your answer that the same effect (of making the parent be as large as its content - even if the content is floating) can be done also by adding overflow: hidden to the parent - without adding any HTML (not even the clearfix)

[Joseph]

@YaronU. You'll encounter problems if the content has shadows (see updated demo). overflow:hidden will clip the shadows if they try to overflow the container. Here, the :after or the additional element clearfix solution is better.

[Yaron U.]

@JosephtheDreamer that right :), I just mentioned it so people can use it when possible - which is in most cases. anyway, thanks for the clarification

[Yuval A.]

Principally, if I use 'inline-block' and I know my targeted browsers all support it - I wouldn't have any need for 'clearfix', right?

[user31782]

Your first statement is misleading. "non-floating elements wrap around the floating elements" -- Only the text wrap around the floating elements not any non-floating element. A div will start from the left of the page as usual because it can't see the floating elements(out of document flow).