Às vezes, a limpeza é necessária .

Os itens flutuantes podem ser mais altos do que o conteúdo não flutuante ou até mesmo Todos os filhos são flutuantes. Para todos esses casos podemos aplicar 3 formas de compensação. Eles são:

Limpar com um elemento subsequente:

1. Requer sequência para permanecer intacta;
2. quebra se as coisas se movem;
3. O fundo / borda não se estendem.

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

Limpeza manual:

1. Requer um elemento vazio;
2. Pode não ser necessário mais tarde.

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

.clear {
 clear: both;
}

O clearfix:

Um clearfix é uma maneira de um elemento limpar automaticamente após si mesmo, de forma que você não precise adicionar marcação adicional. Geralmente é usado em layouts de flutuação onde os elementos são flutuados para serem empilhados horizontalmente.

<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 */ 
}