Clearing Floats. What approach is recommended today?

Giganews Newsgroups
Subject: Clearing Floats. What approach is recommended today?
Posted by:  Shapper (mdmou…@gmail.com)
Date: Mon, 5 Sep 2011

Hello,

What code do you advice to clear floats? I know 4 options:

1 - Adding an empty Div

    <div class="Clear></div>
    .Clear {clear: both;}

    It works great but I don't like the need to have these divs on the markup.

2 - Using overflow: hidden on the container.

    .Clear {overflow: hidden;}

    I think this option needs to set the width or height of the container.
    However, in alternative I can use zoom:1. But then it does not validate.

3 - The Clearfix method

    .Clear {zoom: 1;}

    .Clear:after {
      clear: both;
      content: ".";
      display: block;
      font-size: 0;
      height: 0;
      visibility: hidden;
    }

    This won't validate either.

4 - Another clearfix version which validates:

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

  /* Begin Backslash Hack \*/
  * html .Clear { height: 1%; }
  .Clear { display: block; }
  /* End Backslash Hack */

  If I am not wrong this works in all browsers ... and it validates.

What are you using this days?

Is there a recommended approach?

--

Thank You,
Miguel

Replies