By H Bellamy

2011-12-18 19:02:44 8 Comments

Recently I was looking through some website's code, and saw that every <div> had a class clearfix.

After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix?

Could you provide some examples of a layout with a clearfix, compared to a layout without a clearfix?


@Madara Uchiha 2011-12-18 19:04:24

If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts.

It's worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.

  • display: inline-block - Better
  • Flexbox - Best (but limited browser support)

Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android's default browser 4.4.

For a detailed browser list see:

(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)

Clearfix Image

(Image originaly posted by @Kyo in this answer)

A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.

The clearfix is a way to combat the zero-height container problem for floated elements

A clearfix is performed as follows:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;

Or, if you don't require IE<8 support, the following is fine too:

.clearfix:after {
  content: "";
  display: table;
  clear: both;

Normally you would need to do something as follows:

    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->

With clearfix, you only need the following:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->

Read about it in this article - by Chris Coyer @ CSS-Tricks

@Madara Uchiha 2012-09-12 16:34:24

The dot won't show up since height: 0; is set.

@Val 2012-09-13 08:43:34

either way for whatever reason a white space is a better practice than a dot, I have had problems with the dot on some browsers hence why I mentioned it :) a little improvement wont hurt :)

@Val 2012-09-14 13:22:19

content: "\00A0"; the \00A0 represent a white space, a simple white space does not work well :) sorry. :)

@mowwwalker 2013-02-27 23:39:11

@MadaraUchiha, why is display:inline-block better than floating elements? The only problem I have is that displaying with inline block causes problems with there is whitespace between the tags, which isn't always easily controllable.

@Madara Uchiha 2013-02-28 06:05:35

It's always easily controllable. If you don't have html access, you set font-size: 0 on the container.

@Kzqai 2013-03-11 21:03:26

@MadaraUchiha And then you have to re-instate the font-size on the content inside the display: inline-block elements. It's pretty ridiculous how far you have to go to get two squares to sit side by side with css.

@Madara Uchiha 2013-03-11 21:05:25

@Kzqai: Which is why flexbox is the preferred option when it becomes more widely supported.

@BoltClock 2014-04-18 10:00:43

Disagree that display: inline-block is better than floats for block-based layout. Inline-blocks are, as their name implies, laid inline - most layouts are block-based and having these blocks be laid out in an inline formatting context just doesn't make sense. You also have to deal with various issues associated with inline formatting, such as inter-element whitespace, other inline elements, sizing, alignment and so on as a lot of others have pointed out. Granted, float layouts don't make a whole lot of sense either, but at least floats have the benefit of being block-based.

@Madara Uchiha 2014-04-18 10:11:26

@BoltClock: Yes well, it depends. Each has their issues. But we're at a day and age where flexbox is a thing. So that means that both suck. You just need to choose the lesser evil to do your job.

@Kardo 2014-08-15 17:45:12

As mentioned in (, this is the best approach in using clearfix: .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ }

@user1767586 2014-09-06 10:56:24

I don't understand why there seem to be two kind of clearfix: one that combats the zero-heigth problem (with overflow: auto) and one that removes the need for a clear:both div. Why are they called the same thing?

@Madara Uchiha 2014-09-06 10:57:40

@user1767586 Clearfix is practically a hack, a workaround. Floats should not be used for layout, that's not what they were meant for. Assuming you don't need lower IE support, you should be using flexbox for layout.

@micah 2015-11-30 15:51:08

"Flexbox - Best". This is an opinion and one I don't necessarily agree with. Flexbox has a time and place but doesn't replace floating elements. Flexbox adds a more stable row-column-row-column approach (like tables). This is inflexible with responsive design and you should consider what works best for you. Personally, I don't like building websites with tables. For that reason I don't like using flexbox.

@trognanders 2015-12-05 23:41:59

inline-block has a noteworthy problem with whitespace sensitivity, and should go in the kludgy hack pile too. display:flex based solutions sure seem nice when you are coding them.

@Madara Uchiha 2016-06-06 14:39:55

@MicahWilliamson Well, as opposed to the other approaches, flexbox was literally designed for exactly this. Therefore, it's objectively better than other solutions which are considered hacks.

@John Slegers 2014-04-18 09:35:45

The clearfix allows a container to wrap its floated children. Without a clearfix or equivalent styling, a container does not wrap around its floated children and collapses, just as if its floated children were positioned absolutely.

There are several versions of the clearfix, with Nicolas Gallagher and Thierry Koblentz as key authors.

If you want support for older browsers, it's best to use this clearfix :

.clearfix:before, .clearfix:after {
    content: "";
    display: table;

.clearfix:after {
    clear: both;

.clearfix {
    *zoom: 1;

In SCSS, you could use the following technique :

%clearfix {
    &:before, &:after {
        content:" ";

    &:after {

    & {

#clearfixedelement {
    @extend %clearfix;

If you don't care about supporting older browsers, there's a shorter version :

.clearfix:after {

@Alexander Suraphel 2015-10-26 12:45:42

Nice answer John! What I am wondering about is why does clear make the div wrap the floated elements? Can you help me visualize it?

@John Slegers 2015-12-10 18:18:42

@AlexanderSuraphel : This answer explains it in detail ->…

@DevWL 2016-01-13 00:56:39

I tried out the accepted answer but I still had a problem with the content alignment. Adding a ":before" selector as shown below fixed the issue:

    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;

LESS above will compile to CSS below:

clearfix:before {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;

@Kir Kanos 2017-04-20 21:02:53

To offer an update on the situation on Q2 of 2017.

A new CSS3 display property is available in Firefox 53, Chrome 58 and Opera 45.

.clearfix {
   display: flow-root;

Check the availability for any browser here:

The element (with a display property set to flow-root) generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.

Meaning that if you use a parent div containing one or several floating children, this property is going to ensure the parent encloses all of its children. Without any need for a clearfix hack. On any children, nor even a last dummy element (if you were using the clearfix variant with :before on the last children).

.container {
  display: flow-root;
  background-color: Gainsboro;

.item {
  border: 1px solid Black;
  float: left;

.item1 {  
  height: 120px;
  width: 120px;

.item2 {  
  height: 80px;
  width: 140px;
  float: right;

.item3 {  
  height: 160px;
  width: 110px;
<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  

@1.21 gigawatts 2017-08-02 20:30:02

Can you describe what this does in relation to the question?

@mystrdat 2018-06-15 15:44:16

Clearfix changes floated children not influencing the parent flow by using what are clever hacks, flow-root is the real solution.

@kyo 2015-04-10 13:12:02

If you learn by visualizing, this picture might help you understand what clearfix does.

enter image description here

@Cozzbie 2016-02-07 08:04:54

So basically a clearfix is as good as just adding overflow: auto to the parent!? Yikes

@Stephan Muller 2016-02-15 09:40:52

@Cozzbie In some cases, yes. overflow: auto can have some unwanted side effects, a clearfix is a global solution to the problem that shouldn't collide with any other properties or have unwanted side effects.

@1.21 gigawatts 2017-08-02 20:25:32

So it forces the container to include the floating elements when calculating it's own size? Thus, it correctly sizes the container background fill to the height and width of it's contents?

@Roko C. Buljan 2019-11-15 17:15:03

Two answers with the same visual??

@Dan W 2015-04-19 08:39:11

The other (and perhaps simplest) option for acheiving a clearfix is to use overflow:hidden; on the containing element. For example

.parent {
  background: red;
  overflow: hidden;
.segment-a {
  float: left;
.segment-b {
  float: right;
<div class="parent">
  <div class="segment-a">
    Float left
  <div class="segment-b">
    Float right

Of course this can only be used in instances where you never wish the content to overflow.

@JRulle 2014-12-17 02:27:52

Simply put, clearfix is a hack.

It is one of those ugly things that we all just have to live with as it is really the only reasonable way of ensuring floated child elements don't overflow their parents. There are other layout schemes out there but floating is too commonplace in web design/development today to ignore the value of the clearfix hack.

I personally lean towards the Micro Clearfix solution (Nicolas Gallagher)

.container:after {
.container:after {
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */


@Domenic 2011-12-18 19:08:39

The other answers are correct. But I want to add that it is a relic of the time when people were first learning CSS, and abused float to do all their layout. float is meant to do stuff like float images next to long runs of text, but lots of people used it as their primary layout mechanism. Since it wasn't really meant for that, you need hacks like "clearfix" to make it work.

These days display: inline-block is a solid alternative (except for IE6 and IE7), although more modern browsers are coming with even more useful layout mechanisms under names like flexbox, grid layout, etc.

@Muhammad Umer 2013-03-14 15:56:16

My practice has come to this that there is no reason to use float ever. Whenever you use it half of the things break. I would only use it when i need things to conjure up inside a div. Inline-block is awesome. New box model is awesome. So no more hacks to go vertical align.

@Rory O'Kane 2013-07-31 21:05:22

inline-block is not a strict improvement over floats because of the inter-block spacing problem, where whitespace in the HTML translates to space characters that separate blocks. inline-block requires workarounds of its own, just like float requires clearfix.

@Val 2012-09-20 09:17:10

Here is a different method same thing but a little different

the difference is the content dot which is replaced with a \00A0 == whitespace

More on this

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

Here is a compact version of it...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}

@ORyan 2013-11-05 23:44:19

You are overriding yourself here in at least 3 instances. .clearfix {...}, html[xmlns] .clearfix {...}, * html .clearfix {...}, and .clearfix {...} all select the same thing and overwrite each other. This is a little hacky and not really needed.

@Val 2013-11-14 10:56:55

This is the old version of CSS clearfix method, was taken from which I then found out, that the "."[dot] was too annoying and replaced it with a white space, hence why \00A0, I think it was because of cross browser compatibility and the knowledge of the time.

@Nathan Taylor 2011-12-18 19:09:41

A technique commonly used in CSS float-based layouts is assigning a handful of CSS properties to an element which you know will contain floating elements. The technique, which is commonly implemented using a class definition called clearfix, (usually) implements the following CSS behaviors:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1

The purpose of these combined behaviors is to create a container :after the active element containing a single '.' marked as hidden which will clear all preexisting floats and effectively reset the the page for the next piece of content.

Related Questions

Sponsored Content

21 Answered Questions

12 Answered Questions

[SOLVED] What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

23 Answered Questions

[SOLVED] What are valid values for the id attribute in HTML?

  • 2008-09-16 09:08:52
  • Mr Shark
  • 425326 View
  • 1940 Score
  • 23 Answer
  • Tags:   html

5 Answered Questions

[SOLVED] What is the purpose of the "role" attribute in HTML?

  • 2012-05-01 10:11:45
  • jeroen
  • 554063 View
  • 1119 Score
  • 5 Answer
  • Tags:   html

29 Answered Questions

[SOLVED] What methods of ‘clearfix’ can I use?

  • 2008-10-17 08:15:36
  • Chris J Allen
  • 464124 View
  • 853 Score
  • 29 Answer
  • Tags:   css clearfix

17 Answered Questions

[SOLVED] What is the difference between visibility:hidden and display:none?

  • 2008-09-25 12:37:47
  • Chris Noe
  • 540048 View
  • 1118 Score
  • 17 Answer
  • Tags:   css visibility

6 Answered Questions

[SOLVED] What is sr-only in Bootstrap 3?

9 Answered Questions

[SOLVED] What does enctype='multipart/form-data' mean?

22 Answered Questions

[SOLVED] What is the best way to conditionally apply a class?

  • 2011-10-17 10:49:52
  • respectTheCode
  • 757796 View
  • 1170 Score
  • 22 Answer
  • Tags:   css angularjs

1 Answered Questions

[SOLVED] Unordered List Clearfix

Sponsored Content