Le clearfix

Voici une partie de mise en page à la mode HTML 5 avec une section et deux aside de chaque côté :

Le code correspondant est celui-ci :

<div class="row">
  <div class="col-sm-2">
    <div class="row">
      <aside class="col-md-12">Aside 1</aside>
      <aside class="col-md-12">Aside 2</aside>
    </div>
  </div>
  <section class="col-sm-10 col-md-8">Section</section>
  <div class="col-md-2">	
    <div class="row">
      <aside class="col-md-12">Aside 3</aside>
      <aside class="col-md-12">Aside 4</aside>
    </div>
  </div>
</div> 	

Sur grand écran et écran moyen tout se passe bien. Mais réduisez l'affichage comme sur une tablette, en dessous de 992 pixels. Vous allez constater un phénomène particulier. Les aside 3 et 4 n'ont plus de place sur la droite, comme on l'a prévu et viennent donc se placer dessous. Mais comme ils sont flottants vous remarquez que l'aside 3 ne se positionne pas au-dessous de l'aside 2 comme on l'espérait mais vient se loger dessous... Pour résoudre ça on utilise la classe clearfix :

Le code correspondant est celui-ci :

<div class="row">
  <div class="col-sm-2">
    <div class="row">
      <aside class="col-md-12">Aside 1</aside>
      <aside class="col-md-12">Aside 2</aside>
    </div>
  </div>
  <section class="col-sm-10 col-md-8">Section</section>
  <div class="clearfix visible-sm"></div>
  <div class="col-md-2">	
    <div class="row">
      <aside class="col-md-12">Aside 3</aside>
      <aside class="col-md-12">Aside 4</aside>
    </div>
  </div>
</div> 	

La ligne importante est celle-ci :

<div class="clearfix visible-sm"></div>  

On n'active la classe clearfix que lorsqu'on arrive sur un petit support (visible-sm)