web-dev-qa-db-fra.com

Que fait la règle CSS "clear: both"?

Que fait la règle CSS suivante:

.clear { clear: both; }

Et pourquoi avons-nous besoin de l'utiliser?

csscss-float
284
user1708560

Je ne vais pas expliquer comment les flottants fonctionnent ici (en détail), car cette question porte généralement sur Pourquoi utiliser clear: both; OR qu'est-ce que clear: both; exactement faire ...

Je vais garder cette réponse simple et précise, et je vous expliquerai graphiquement pourquoi clear: both; est requis 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 d’occuper l’espace restant.

Pourquoi font-ils flotter des éléments?

Les éléments sont flottants 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 avec une présentation comme ci-dessous ...

enter image description here

Exemple en direct 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;
}
<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

Remarque: Vous devrez peut-être ajouter header, footer, aside, section (et d'autres éléments HTML5) en tant que display: block; dans votre feuille de style pour indiquer explicitement que les éléments sont des éléments de niveau bloc.

Explication:

J'ai une mise en page de base, 1 en-tête, 1 barre latérale, 1 zone de contenu et 1 pied de page.

Aucun flottant pour header, vient ensuite la balise aside que je vais utiliser pour la barre latérale de mon site Web, donc je vais faire flotter l'élément vers la gauche.

Remarque: Par défaut, l'élément de niveau bloc occupe 100% du document, mais lorsqu'il est flottant à gauche ou à droite, il sera redimensionné en fonction du contenu qu'il contient.

  1. comportement normal de l'élément de niveau bloc
  2. comportement flottant de l'élément de niveau bloc

Donc, comme vous le constatez, le flottant gauche div laisse l'espace inutilisé à droite, ce qui permet à la div de se déplacer dans l'espace restant.

  1. div 'sera rendu l'un après l'autre s'ils ne sont pas flottants
  2. div se déplacera côte à côte si flottant à gauche ou à droite

Ok, voici comment se comportent les éléments de niveau bloc lorsqu'ils sont flottants à gauche ou à droite. Pourquoi maintenant clear: both; est-il requis et pourquoi?

Donc, si vous notez dans la démonstration, si vous avez oublié, ici c'est ..

J'utilise une classe appelée .clear et elle contient une propriété appelée clear avec une valeur de both. Voyons donc pourquoi il a besoin de both.

J'ai flotté aside et section éléments à gauche, supposons donc un scénario où nous avons une piscine, où header est un terrain solide, aside et section flottent dans la piscine et le pied de page est à nouveau solide, quelque chose comme ça.

Floated View

Ainsi, l'eau bleue n'a aucune idée de la superficie des éléments flottants, ils peuvent être plus grands que la piscine ou plus petits. Voilà donc un problème commun qui concerne 90% des débutants CSS: pourquoi l'arrière-plan d'un élément conteneur n'est pas étendu. quand il contient des éléments flottants. C'est parce que l'élément conteneur est un POOL ici et le POOL n'a aucune idée du nombre d'objets flottants ni de la longueur ou de la largeur des éléments flottants, de sorte que cela ne s'étire tout simplement pas.

  1. Flux normal du document
  2. sections flottantes à gauche
  3. Éléments flottés effacés pour étirer la couleur de fond du conteneur

(Référer [Clearfix] section de cette réponse pour la manière ordonnée de faire ceci. J'utilise un exemple div vide volontairement à des fins d'explication)

J'ai fourni 3 exemples ci-dessus, 1er étant le flux de documents normal dans lequel red background sera simplement rendu comme prévu, car le conteneur ne contient aucun objet flottant.

Dans le deuxième exemple, lorsque l'objet est flotté à gauche, l'élément conteneur (POOL) ne connaît pas les dimensions des éléments flottants et ne s'étend donc pas à la hauteur de ces éléments.

enter image description here

Après avoir utilisé clear: both;, l'élément conteneur sera étiré aux dimensions de l'élément flottant.

enter image description here

Une autre raison pour laquelle le clear: both; est utilisé est d'empêcher l'élément de se déplacer vers le haut dans l'espace restant.

Supposons que vous vouliez 2 éléments côte à côte et un autre en dessous ... Vous allez donc laisser 2 éléments à gauche et vous voulez l'autre en dessous.

  1. div flottant à gauche entraînant section dans l'espace restant
  2. Floated div effacé de sorte que la balise section apparaisse sous le _ flotté divs

1er exemple

enter image description here

2ème exemple

enter image description here

Dernier point mais non le moindre, la balise footer sera rendue après les éléments flottants, comme j’ai utilisé la classe clear avant de déclarer mes balises footer, ce qui garantit que tous les éléments flottants (à gauche/right) sont effacés jusqu'à ce point.

Clearfix

Venir à clearfix qui est lié aux flotteurs. Comme déjà spécifié par @ Elky , la façon dont nous effaçons ces flottants n’est pas une méthode simple, car nous utilisons un élément div vide qui n’est pas un élément div l'élément est destiné à. D'où voici le clearfix.

Considérez-le comme un élément virtuel qui créera pour vous un élément vide avant la fin de votre élément parent. Cela effacera automatiquement votre élément enveloppant contenant des éléments flottants. Cet élément n'existera pas dans votre DOM, mais fera l'affaire.

Pour effacer tout élément enveloppant ayant des éléments flottants, nous pouvons utiliser

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Notez le pseudo-élément :after utilisé par moi pour ce class. Cela créera un élément virtuel pour l'élément wrapper juste avant qu'il ne se ferme. Si nous regardons dans le domaine, vous pouvez voir comment il apparaît dans l'arborescence du document.

Clearfix

Donc, si vous voyez, il est rendu après l'enfant flotté div où nous effaçons les flotteurs, ce qui n'est rien d'autre que l'équivalent d'avoir un élément div vide avec la propriété clear: both; que nous utilisons pour cela. aussi. Maintenant, pourquoi display: table; et content sont hors de la portée de cette réponse mais vous pouvez en apprendre plus sur pseudo élément ici .

Notez que cela fonctionnera également dans IE8 en tant que IE8 supporte :after pseudo .

Réponse originale:

La plupart des développeurs font flotter leur contenu à gauche ou à droite sur leurs pages, probablement avec un logo, une barre latérale, un contenu, etc., ces div sont flottés à gauche ou à droite, laissant le reste de l'espace inutilisé et, par conséquent, si vous placez d'autres conteneurs, flotte aussi dans l'espace restant, donc pour éviter que clear: both; ne soit utilisé, il efface tous les éléments flottant à gauche ou à droite.

Manifestation:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

Maintenant que se passe-t-il si vous voulez que l’autre div rend en-dessous de div1, vous utiliserez donc clear: both; pour vous assurer de supprimer tous les flottants, à gauche ou à droite

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------
672
Mr. Alien

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

clear: none; L'élément reste 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;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; Elément poussé sous les éléments flottants de gauche

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; Elément poussé sous les éléments flottants de droite

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; Elément poussé sous tous les é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-both {
  clear: both;
  background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear n'affecte pas les flottants en dehors du contexte de formatage de bloc actuel

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>
38
Salman A

CSS float et clear

exemple de violon

Essayez simplement de supprimer la propriété clear:both de la div avec classsample et voyez comment elle suit la méthode divs.

23
Priyank Patel

La réponse de M. Alien est parfaite, mais de toute façon, je ne recommande pas d'utiliser <div class="clear"></div>, car c'est juste un hack qui salit votre balisage. Ceci est inutile div vide en termes de mauvaise structure et sémantique, cela rend également votre code non flexible. Dans certains navigateurs, cette div provoque une hauteur supplémentaire et vous devez ajouter height: 0;, ce qui est encore pire. Mais les vrais problèmes commencent lorsque vous souhaitez ajouter un arrière-plan ou une bordure autour de vos éléments flottants - cela va simplement s'effondrer car Web a été mal conçu . Je recommande d'encapsuler les éléments flottants dans un conteneur qui a clearfix règle CSS. C'est un hack aussi, mais beau, plus flexible à utiliser et lisible par les robots humains et les robots de référencement.

12
elky

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

Si vous faites flotter du contenu, vous pouvez flotter à gauche ou à droite ... de sorte que dans une mise en page commune, vous pouvez avoir une navigation à gauche, une div de contenu et un pied de page.

Pour vous assurer que le pied de page reste en dessous de ces deux flotteurs (si vous avez flotté à gauche et à droite), placez le pied de page sous la forme clear: both.

De cette façon, il restera sous les deux flotteurs.

(Si vous ne faites que supprimer, il ne vous reste plus que clear: left;.)

Passez par ce tutoriel:

2
Saeed