Que fait la règle CSS «clear: both»?

Que fait la règle CSS suivante:

.clear { clear: both; } 

Et pourquoi devons-nous l’utiliser?

Je ne vais pas vous expliquer comment fonctionnent les flotteurs (en détail), car cette question est généralement axée sur la question de savoir pourquoi utiliser clear: both; OU ce qui est clear: both; exactement faire …

Je vais garder cette réponse simple, et aller droit au but, et je vous expliquerai pourquoi clear: both; est nécessaire ou ce qu’il fait …

Généralement, les concepteurs font flotter les éléments, à gauche ou à droite, ce qui crée un espace vide de l’autre côté, ce qui permet aux autres éléments de prendre l’espace restant.

Pourquoi flottent-ils des éléments?

Les éléments flottent lorsque le concepteur a besoin de 2 éléments de niveau bloc côte à côte. Par exemple, disons que nous voulons concevoir un site Web de base qui a une disposition comme ci-dessous …

entrer la description de l'image ici

Live Exemple de l’image de démonstration.

Code pour la démo

 /* CSS: */ * { /* Not related to floats / clear both, used it for demo purpose only */ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } header, footer { border: 5px solid #000; height: 100px; } aside { float: left; width: 30%; border: 5px solid #000; height: 300px; } section { float: left; width: 70%; border: 5px solid #000; height: 300px; } .clear { clear: both; } 
  
Header
Content (Floated Left, Can Be Floated To Right As Well)
Footer

La propriété clear indique que les éléments gauche, droit ou des deux côtés d’un élément ne peuvent pas être adjacents à des éléments flottants antérieurs dans le même contexte de mise en forme de bloc. Les éléments effacés sont poussés sous les éléments flottants correspondants. Exemples:

clear: none; L’élément rest adjacent aux éléments flottants

 body { font-family: monospace; background: #EEE; } .float-left { float: left; width: 60px; height: 60px; background: #CEF; } .float-right { float: right; width: 60px; height: 60px; background: #CEF; } .clear-none { clear: none; background: #FFF; } 
 
float: left;
float: right;
clear: none;

CSS float et clear

Échantillon de violon

Essayez simplement de supprimer clear:both propriétés de la div avec class sample class et voyez comment il suit les divs flottants.

La réponse de M. Alien est parfaite, mais de toute façon je ne recommande pas d’utiliser

car c’est juste un hack qui rend votre balisage sale. Ceci est inutile div en termes de mauvaise structure et de sémantique, cela rend également votre code non flexible. Dans certains navigateurs, cette div provoque une hauteur supplémentaire et vous devez append la height: 0; ce qui est encore pire. Mais de véritables problèmes commencent lorsque vous souhaitez append de l’arrière-plan ou des bordures à vos éléments flottants. Je recommande d’ encapsuler les éléments flottants dans un conteneur doté d’ une règle CSS clearfix . C’est aussi un hack, mais beau, plus souple à utiliser et lisible pour les robots humains et SEO.

Lorsque vous voulez un élément placé en bas, vous utilisez ce code en CSS. Il est utilisé pour les flotteurs.

Si vous flottez du contenu, vous pouvez le faire flotter à gauche ou à droite … Dans une mise en page commune, vous pouvez donc avoir un navigateur de gauche, un div du contenu et un pied de page.

Pour vous assurer que le pied de page rest au-dessous de ces deux flotteurs (si vous avez flotté à gauche et à droite), vous mettez le pied de page aussi clear: both .

De cette façon, il restra en dessous des deux flotteurs.

(Si vous ne faites que dégager, il vous suffit de clear: left; )

Parcourez ce tutoriel: