Un élément flottant (doté de la propriété float avec les valeurs left ou right) est partiellement retiré du flux normal vis-à-vis de son bloc conteneur.

Quelques solutions permettant à un conteneur d'englober ses enfants flottants :

Contexte de formatage bloc (spécifications CSS 2.1) :

#parent {
  border : 1px solid red;
  overflow : hidden; /* établir un nouveau contexte de formatage */
}
 
#enfant {
  float : left;
  background : green;
}

<div id="parent">
  <div id="enfant">
    Un enfant flottant
  </div>
</div>

Internet Explorer 6 n'établit pas de contexte de formatage mais reproduit un comportement similaire si l'élément est doté de Layout.
Sinon, on peut attribuer la propriété zoom avec la valeur 1 entre commentaires conditionnels :

<!--[if lte IE 6]>
  <style type="text/css" media="screen">
    #parent {
      zoom : 1; /* Confère le Layout */
    }    
  </style> 
<![endif]-->

La propriété clear appliquée via le pseudo-élément after (ne fonctionne pas sous Internet Explorer 7 et 6):

#parent {
  border : 1px solid red;
}
 
#parent:after {
  content : ""; /* On génère une chaine vide */
  display : block;
  clear : both;
}
 
#enfant {
  float : left;
  background : green;
}

La propriété clear appliquée à un élément block vide :

#parent {
  border : 1px solid red;
}
 
#enfant {
  float : left;
  background : green;
}
.clear {
  clear : both;  
}

<div id="parent">
  <div id="enfant">
    Un enfant flottant
  </div>
 
  <div class="clear"></div>
</div>

Pour cela, nous allons avoir recours au positionnement absolu.

Il faut commencer par attribuer une hauteur de 100% aux éléments html et body, afin d'occuper toute la hauteur de la zone de visualisation.

html, body {
  margin : 0;
  padding : 0;
  height : 100%;
}

Ensuite, on crée un conteneur global qui occupe une hauteur minimale de 100%.
Ce conteneur sera le référent du footer positionné en absolu.

#wrapper {
  position : relative; /* référent du footer */
  min-height : 100%;
  background : green;
}

Et un conteneur ayant comme padding-bottom la hauteur du footer :

#container {
  padding-bottom : 6em; /* padding-bottom = hauteur du footer */
}

Internet Explorer 6 ne reconnait pas la propriété min-height mais interprète height de la même manière.
On peut attribuer height:100% entre commentaires conditionnels :

<!--[if lte IE 6]>
  <style type="text/css" media="screen">
    #conteneur {
      height : 100%;
    }
  </style> 
<![endif]-->

Enfin, on crée un footer positionné en absolu, en bas de son conteneur :

#footer {
  position : absolute;
  width : 100%; /* obligatoire si la largeur du footer n'est pas spécifiée explicitement dans le code CSS */
  height : 6em;
  bottom : 0; /* positionner le footer en bas */
  left : 0; /* positionner le footer à gauche */
  background : red;
}

<div id="wrapper">
  <div id="container">
    Contenu
  </div>
  <div id="footer">
    Footer en bas de page.
  </div>
</div>

Une hauteur ou hauteur minimale en pourcentage (%) ne peut pas être calculée si la hauteur (pas de hauteur minimale) du parent direct n'est pas spécifiée explicitement. Par exemple :

html, body {
  margin : 0;
  padding : 0;
  height : 100%;
}
 
#parent {
  height : 100%;
  background : green;
}
 
#enfant {
  height : 50%;
  background : red;
}

<div id="parent">
  <div id="enfant">
    Bloc qui prend en référence la hauteur de son parent.
  </div>
</div>

• body se réfère à la hauteur de son parent direct html ;
• parent se réfère à la hauteur de son parent direct body ;
• enfant se réfère à la hauteur de son parent direct parent ;