Clearing Floats

There are way too many ways to clear floats

Lame

<div id="float-example">
  <h2>This is what a non-cleared float looks like</h2>
  <p>The green background should cover the two boxes below.</p>
  <div class="left">
  <p>I'm floating to the left.<br>
    My parent container doesn't clear the height of this box.<br>
    How are we going to fix this?</p>
  </div>
  <div class="right">
    <p>Stuff on the right side.<br>
    This is just to take up space.<br>
    Nothing to see here. Move along.<br>
    :-)</p>
  </div>
  <br clear="all" />
</div>

Adding a block element as the last element in the container will clear the float.

Why is this lame?

• Adds presentational markup to document
• Can't control it from a stylesheet

Better

<div id="float-example" class="clearfix">
  <h2>This is what a non-cleared float looks like</h2>
  <p>The green background should cover the two boxes below.</p>
  <div class="left">
  <p>I'm floating to the left.<br>
    My parent container doesn't clear the height of this box.<br>
    How are we going to fix this?</p>
  </div>
  <div class="right">
    <p>Stuff on the right side.<br>
    This is just to take up space.<br>
    Nothing to see here. Move along.<br>
    :-)</p>
  </div>
</div>

<style type="text/css">
   .clearfix:after {
    	content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        zoom: 1;
     }
 </style><

Adding a clearfix class to the container element. Using the :after pseudo-class to add an empty block element as the last child of the container.

Why is this better?

• Can control from afar

but …

• Still requires modifying HTML to work
• Confusing

Best

<div id="float-example"
  <h2>This is what a non-cleared float looks like</h2>
  <p>The green background should cover the two boxes below.</p>
  <div class="left">
  <p>I'm floating to the left.<br>
    My parent container doesn't clear the height of this box.<br>
    How are we going to fix this?</p>
  </div>
  <div class="right">
    <p>Stuff on the right side.<br>
    This is just to take up space.<br>
    Nothing to see here. Move along.<br>
    :-)</p>
  </div>
</div>

<style type="text/css">
   #float-example {
    	overflow:auto;
        height:100%;
     }
 </style><

Setting the overflow property of the containing element to auto or hidden will clear any floated child elements. IE need hasLayout triggered to work which is done by setting the width or height to anything but auto. Setting zoom to 1 will also trigger hasLayout.

Why is this the best?

• No need to fiddle with extra markup
• Can be applied to any element via a stylesheet
• It's simple

Source: Sitepoint Reference: Floating and Clearing