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.
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 …
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)
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: