Sometimes clearing is necessary.

Floated items can be taller than non-floated content or even All children are floating. For all this cases we can apply 3 ways of clearing. They are:

Clear with a subsequent element:

1. Requires sequence to stay intact;
2. breaks if things move;
3. Background / border do not extend.

<div>
 <img src="ski.jpg" alt="Skiing!" />
 <p>To successfully ski, simply do not fall.</p>
</div> 
<div class="intro">
  <p>Whee!</p>
</div>

img {
  float: left;
}
.intro {
  clear: both;
}

Manual clearing:

1. Requires an empty element;
2. Might not be necessary later.

<div>
  <img src="ski.jpg" alt="Skiing!" />
  <p>To successfully ski, simply do not fall.</p>
  <div class="clear"></div>
 </div>

.clear {
 clear: both;
}

The clearfix:

A clearfix is a way for an element to automatically clear after itself, 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.

<div class="group">
 <img src="ski.jpg" alt="Skiing!" />
 <p>To successfully ski, simply do not fall.</p>
</div>

.group:before, .group:after { 
  content: "";
  display: table; 
}
.group :after {
  clear: both; 
}
.group {
  zoom: 1; /* IE6&7 */ 
}