What is clearfix?

What is clearfix?

Recently I was looking through some website's code, and saw that every

had a class clearfix.

After a quick Google search, I learned that it is for IE6 sometimes, but what actually is clearfix? Could you provide some examples of a layout with clearfix, compared to a layout without clearfix?

Answer by Madara Uchiha for What is clearfix?

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: http://caniuse.com/flexbox.

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

---

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:

      
Sidebar
      
   
  

With clearfix, you only need to

      
Sidebar
        
  

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

Answer by Domenic for What is clearfix?

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.

Answer by Nathan Taylor for What is clearfix?

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.

Answer by Val for What is clearfix?

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 http://www.jqui.net/tips-tricks/css-clearfix/

.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}  

Answer by John Slegers for What is clearfix?

The clearfix allows a container to wrap it's floated children. Without a clearfix or equivalent styling, a container does not wrap around its floated children and collapses, just as if its floated chldren 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 should use the following technique :

%clearfix {    &:before, &:after {      content:" ";      display:table;    }      &:after {      clear:both;    }      & {      *zoom:1;    }  }    #clearfixedelement {      @extend %clearfix;  }  

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

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

Answer by JRulle for What is clearfix?

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:before,  .container:after {    content:"";    display:table;  }  .container:after {    clear:both;  }  .container {    zoom:1; /* For IE 6/7 (trigger hasLayout) */  }  

reference

Answer by ihue for What is clearfix?

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

Answer by rwdrwd for What is clearfix?

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;  }

    
      Float left    
    
      Float right    
  

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

Answer by Rahul Kashyap for What is clearfix?

.parent {    background: red;    overflow: hidden;  }  .segment-a {    float: left;  }  .segment-b {    float: right;  }

    
      Float left    
    
      Float right    
  

Answer by GlupiJas for What is clearfix?

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

// LESS HELPER  .clearfix()  {      &:after, &:before{         content: " "; /* Older browser do not support empty content */         visibility: hidden;         display: block;         height: 0;         clear: both;      }  }  

LESS abowe will complie to CSS below:

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

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72