What is a clearfix

Question

Recently I was looking through some website s code  and saw that every  lt div gt   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

User · Answer

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

User · Answer

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  https   caniuse com flexbox    Perhaps once its 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 lt 8 support  the following is fine too    clearfix after     content        display  table    clear  both      Normally you would need to do something as follows      lt div gt       lt div style  float  left   gt Sidebar lt  div gt       lt div style  clear  both   gt  lt  div gt   lt  -- Clear the float -- gt   lt  div gt    With clearfix  you only need the following    lt div class  clearfix  gt       lt div style  float  left   class  clearfix  gt Sidebar lt  div gt       lt  -- No Clearing div  -- gt   lt  div gt    Read about it in this article - by Chris Coyer   CSS-Tricks

User · Answer

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      LESS HELPER  clearfix          amp  after   amp  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 after  clearfix before     content            Older browser do not support empty content      visibility  hidden    display  block    height  0    clear  both

User · Answer

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

User · Answer

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  http   caniuse com  feat flow-root  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      x000D   x000D   container   x000D    display  flow-root  x000D    background-color  Gainsboro  x000D    x000D   x000D   item   x000D    border  1px solid Black  x000D    float  left  x000D    x000D   x000D   item1     x000D    height  120px  x000D    width  120px  x000D    x000D   x000D   item2     x000D    height  80px  x000D    width  140px  x000D    float  right  x000D    x000D   x000D   item3     x000D    height  160px  x000D    width  110px  x000D    x000D   lt div class  container  gt  x000D    This container box encloses all of its floating children  x000D     lt div class  item item1  gt Floating box 1 lt  div gt  x000D     lt div class  item item2  gt Floating box 2 lt  div gt   x000D     lt div class  item item3  gt Floating box 3 lt  div gt    x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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        amp  before   amp  after           content              display table              amp  after           clear both              amp             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

User · Answer

The other  and perhaps simplest  option for acheiving a clearfix is to use overflow hidden  on the containing element  For example   x000D   x000D   parent   x000D    background  red  x000D    overflow  hidden  x000D    x000D   segment-a   x000D    float  left  x000D    x000D   segment-b   x000D    float  right  x000D    x000D   lt div class  parent  gt  x000D     lt div class  segment-a  gt  x000D      Float left x000D     lt  div gt  x000D     lt div class  segment-b  gt  x000D      Float right x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Of course this can only be used in instances where you never wish the content to overflow

User · Answer

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

User · Answer

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

[html] What is a clearfix?

Examples related to html

Examples related to css

Examples related to layout

Examples related to cross-browser

Examples related to clearfix