Que fait la règle CSS suivante:

.clear { clear: both; }

Et pourquoi devons-nous l'utiliser?

Je ne vais pas expliquer comment les flotteurs fonctionnent ici (en détail), car cette question se concentre généralement sur Pourquoi utiliser clear: both;OU ce qui fait clear: both;exactement ...

Je vais garder cette réponse simple et clear: both;précise , et je vais vous expliquer graphiquement pourquoi 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é qui permet à d'autres éléments de prendre l'espace restant.

Pourquoi font-ils flotter 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 mise en page comme ci-dessous ...

Exemple en direct de l'image de démonstration.

Code pour 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>

Note: Vous pourriez avoir à ajouter header, footer, aside, section(et d' autres éléments HTML5) comme display: block;dans votre feuille de style pour mentionner 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 asidebalise que j'utiliserai pour la barre latérale de mon site Web, donc je vais faire flotter l'élément à gauche.

Remarque: Par défaut, l'élément de niveau bloc occupe 100% de la largeur du document, mais lorsqu'il flotte à gauche ou à droite, il se redimensionne 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, la gauche flottante divlaisse l'espace à sa droite inutilisé, ce qui permettra à l' divafter de se déplacer dans l'espace restant.

1. divs'afficheront les uns après les autres s'ils ne sont PAS flottés
2. div se déplacera les uns à côté des autres s'il flotte à gauche ou à droite

Ok, c'est ainsi que les éléments de niveau bloc se comportent lorsqu'ils flottent à gauche ou à droite, alors pourquoi est-ce clear: both;nécessaire et pourquoi?

Donc, si vous notez dans la démo de mise en page - au cas où vous l'auriez oublié, la voici .

J'utilise une classe appelée .clearet elle contient une propriété appelée clearavec une valeur de both. Voyons donc pourquoi il en a besoin both.

J'ai flotté asideet des sectionéléments à gauche, alors supposez un scénario, où nous avons une piscine, où headerest un terrain solide, asideet sectionflottons dans la piscine et le pied de page est à nouveau un terrain solide, quelque chose comme ça ..

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

1. Flux normal du document
2. Sections flottant vers la gauche
3. Éléments flottants désactivés pour étirer la couleur d'arrière-plan du conteneur

(Reportez-vous à la section ^[Clearfix] de cette réponse pour une manière ^claire de le faire. J'utilise divintentionnellement un exemple vide à des fins d'explication)

J'ai fourni 3 exemples ci-dessus, le premier est le flux de documents normal où l' redarrière-plan sera juste rendu comme prévu puisque le conteneur ne contient aucun objet flottant.

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

Après utilisation clear: both;, l'élément conteneur sera étiré à ses dimensions flottantes.

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

Disons que vous voulez 2 éléments côte à côte et un autre élément en dessous d'eux.

1. divFlotté à gauche entraînant un sectiondéplacement dans l'espace restant
2. Flotté diveffacé de sorte que la sectionbalise restituera en dessous du flottant divs

1er exemple

2ème exemple

Enfin et surtout, la footerbalise sera rendue après les éléments flottants comme j'ai utilisé la clearclasse avant de déclarer mes footerbalises, ce qui garantit que tous les éléments flottants (gauche / droite) sont effacés jusqu'à ce point.

Clearfix

Venir à clearfix qui est lié aux flottants. Comme déjà spécifié par @Elky , la façon dont nous effaçons ces flottants n'est pas une manière propre de le faire car nous utilisons un divélément vide qui n'est pas un divélément destiné. D'où vient 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 wrapper contenant des éléments flottants. Cet élément n'existera pas littéralement dans votre DOM mais fera le travail.

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

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

Notez le :afterpseudo-élément que j'ai utilisé pour cela 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 dom, vous pouvez voir comment il apparaît dans l'arborescence des documents.

Donc, si vous voyez, il est rendu après l'enfant flottant divoù nous effaçons les flotteurs qui ne sont rien d'autre que l'équivalent d'avoir un divélément vide avec une clear: both;propriété que nous utilisons également pour cela. Maintenant, pourquoi display: table;et contenthors de cette portée des réponses, mais vous pouvez en savoir plus sur le pseudo-élément ici .

Notez que cela fonctionnera également dans IE8 car IE8 prend en charge les :afterpseudo .

Réponse originale:

La plupart des développeurs flottent leur contenu à gauche ou à droite sur leurs pages, probablement des divs contenant le logo, la barre latérale, le contenu, etc., ces divs flottent à gauche ou à droite, laissant le reste de l'espace inutilisé et donc si vous placez d'autres conteneurs, il flotte également dans l'espace restant, afin d'éviter que cela ne clear: both;soit utilisé, il efface tous les éléments flottants à gauche ou à droite.

Manifestation:

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

Maintenant, que se passe-t-il si vous voulez faire le rendu de l'autre div ci div1- dessous , vous allez clear: both;donc l' utiliser pour vous assurer d'effacer 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
----------------------------------

La clearpropriété 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 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 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; Élément poussé sous les éléments flottants à 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; Élément poussé en dessous des éléments flottants à 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; Élé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>

CSS float et clear

Exemple de violon

Essayez simplement de supprimer la clear:bothpropriété du divwith class sampleet voyez comment elle suit flottante divs.

La réponse de M. Alien est parfaite, mais de toute façon je ne recommande pas de l'utiliser <div class="clear"></div>car c'est juste un hack qui rend votre balisage sale. Cela est inutile diven termes de mauvaise structure et de sémantique, cela rend également votre code peu flexible. Dans certains navigateurs, cette division entraîne une hauteur supplémentaire et vous devez en ajouter height: 0;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 s'effondrera simplement parce que le Web a été mal conçu . Je recommande d'envelopper les éléments flottants dans un conteneur qui a une règle CSS clearfix . C'est aussi un hack, mais beau, plus flexible à utiliser et lisible pour les robots humains et SEO.

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

Si vous faites flotter du contenu, vous pouvez flotter à gauche ou à droite.

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

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

(Si vous n'effacez qu'à gauche, vous n'en avez vraiment besoin clear: left;.)

Suivez ce tutoriel: