Pourquoi effacer les deux CSS ?

Question

Pourquoi devons-nous utiliser la propriété CSS clear avec une valeur de both ?

Exemple :

.clear { 
    clear:both; 
}

Answer 1

Je n'expliquerai pas ici (en détail) le fonctionnement des flotteurs, car cette question porte généralement sur les points suivants Pourquoi utiliser clear: both; OU ce que fait clear: both; exactement faire...

Cette réponse sera simple et directe, et vous expliquera graphiquement pourquoi. clear: both; est nécessaire ou ce qu'il fait...

En général, 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 d'occuper l'espace restant.

Pourquoi les éléments flottants ?

Les éléments sont flottants lorsque le concepteur a besoin de deux éléments de niveau bloc côte à côte. Par exemple, disons que nous voulons concevoir un site Web de base dont la disposition est la suivante...

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

Code pour la démo

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>

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;
}

Note : Vous devrez peut-être 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, un en-tête, une barre latérale, une zone de contenu et un pied de page.

Pas de flotteurs pour header Ensuite, vient le aside que j'utiliserai pour la barre latérale de mon site Web. Je ferai donc flotter l'élément vers la gauche.

Remarque : par défaut, l'élément de niveau bloc occupe une largeur de 100 % du document, mais lorsqu'il est déplacé vers la gauche ou la droite, il est redimensionné en fonction du contenu qu'il contient. contenu qu'il contient.

1. Comportement normal d'un élément de niveau bloc
2. Comportement flottant d'un élément de niveau bloc

Donc, comme vous le notez, la gauche a flotté div laisse l'espace à sa droite inutilisé, ce qui permettra à la div après lui pour décaler l'espace restant.

1. div s'afficheront l'un après l'autre s'ils ne sont pas flottants.
2. div se déplaceront l'une à côté de l'autre si elles sont placées à gauche ou à droite.

Ok, c'est ainsi que les éléments de niveau bloc se comportent lorsqu'ils sont flottés à gauche ou à droite. clear: both; nécessaire et pourquoi ?

Donc si vous notez dans la démo de la mise en page - au cas où vous auriez oublié, ici c'est

J'utilise une classe appelée .clear et il détient une propriété appelée clear avec une valeur de both . Voyons donc pourquoi il faut both .

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

L'eau bleue n'a donc aucune idée de la superficie des éléments flottants, qui peuvent être plus grands que la piscine ou plus petits. Voici donc un problème courant qui dérange 90 % des débutants en CSS : pourquoi l'arrière-plan d'un élément conteneur n'est pas étiré lorsqu'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 qu'il ne s'étire tout simplement pas.

1. Déroulement normal du document
2. Sections flottant à gauche
3. Effacement des éléments flottants pour étirer la couleur de fond du conteneur

J'ai fourni 3 exemples ci-dessus, le premier est le flux normal du document où red sera rendu comme prévu puisque le conteneur ne contient pas d'objets flottants.

Dans le deuxième exemple, lorsque l'objet est flottant vers la 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 avoir utilisé clear: both; l'élément conteneur sera étiré aux dimensions de son élément flottant.

Une autre raison pour laquelle le clear: both; est utilisé pour 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... Donc vous ferez flotter 2 éléments à gauche et vous voulez l'autre en dessous.

1. div Flottant à gauche, ce qui donne section s'installer dans l'espace restant
2. Flottant div nettoyé afin que le section sera rendu sous la balise flottante div s

---

1er exemple

---

2ème exemple

Enfin, et surtout, le footer sera rendu après les éléments flottants puisque j'ai utilisé la balise clear avant de déclarer mon footer ce qui garantit que tous les éléments flottants (gauche/droite) sont effacés jusqu'à ce point.

---

Réponse originale :

La plupart des développeurs font flotter leur contenu à gauche ou à droite sur leurs pages, probablement les divs contenant le logo, la barre latérale, le contenu etc., ces divs sont flottés à gauche ou à droite, laissant le reste de l'espace inutilisé et donc si vous placez d'autres conteneurs, ils flotteront aussi dans l'espace restant, donc pour éviter cela clear: both; est utilisé, il efface tous les éléments flottés à gauche ou à droite.

Démonstration :

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

Maintenant, si vous voulez que l'autre div soit rendu comme suit div1 Vous utiliserez donc clear: both; afin de s'assurer que vous effacez tous les flotteurs, à gauche ou à droite.

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

Answer 2

En clear indique que la gauche, la droite 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 formatage 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 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; Élé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; É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 actuel de formatage du bloc

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>

Answer 3

CSS float et clear

Exemple de violon

Essayez juste d'enlever clear:both à partir de la div avec class sample et voir comment il suit le flottement divs .

Answer 4

La réponse de M. Alien est parfaite, mais de toute façon je ne recommande pas d'utiliser <div class="clear"></div> parce que c'est juste un hack qui rend votre markup sale. C'est inutile vide div en termes de mauvaise structure et de sémantique, cela rend également votre code peu flexible. Dans certains navigateurs, ce 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 voulez ajouter un arrière-plan ou une bordure autour de vos éléments flottants - ils s'effondrent tout simplement car le web a été mal conçu . Je recommande d'envelopper les éléments flottants dans un conteneur qui a une fonction clearfix Règle CSS. C'est aussi un hack, mais il est beau, plus souple à utiliser et lisible pour les humains et les robots de référencement.

Answer 5

Quand vous voulez qu'un élément soit placé en dessous d'un autre élément, vous utilisez ce code en css. il est utilisé pour les flottants.

si vous faites flotter le contenu, vous pouvez le faire à gauche ou à droite... ainsi, dans une mise en page courante, vous pouvez avoir une barre de navigation à gauche, une division de contenu et un pied de page.

pour s'assurer que le pied de page reste en dessous de ces deux flotteurs (si vous avez fait des flotteurs à gauche et à droite), vous mettez le pied de page comme clear : both.

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

(si vous n'effacez que la gauche, vous n'avez besoin d'effacer que : gauche ; )

passer par ce tutoriel :