Je n'expliquerai pas comment fonctionnent les flotteurs ici (en détail), car cette question se concentre généralement sur Pourquoi utiliser clear: both; ou ce que clear: both; fait exactement...

je vais garder cette réponse simple et au point, et va vous expliquer graphiquement pourquoi clear: both; est nécessaire ou ce qu'il fait...

généralement les concepteurs flottent les éléments, à gauche ou à droite, ce qui crée un espace vide sur l'autre côté qui permet à d'autres éléments à prendre le reste de l'espace.

pourquoi font-ils flotter des éléments?

Les éléments

sont flottés 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 qui a une mise en page comme ci-dessous...

Live Exemple de l'image de démo.

Code De 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 base mise en page, 1 en-tête, 1 bar, 1 zone de contenu et 1 pied de page.

pas de flotteurs pour header , vient ensuite l'étiquette aside que je vais utiliser pour ma barre latérale de site web, donc je vais flotter l'élément à gauche.

Remarque: Par défaut, l'élément de niveau bloc prend du document à 100% de la largeur, mais quand flotté à gauche ou à droite, il se redimensionnera selon le le contenu qu'il détient.

1. Comportement Normal De L'Élément De Niveau De Bloc
2. Comportement Flottant De L'Élément De Niveau De Bloc

comme vous le constatez, la gauche flottée div laisse l'espace à sa droite inutilisée, ce qui permettra au div après lui de se déplacer dans l'espace restant.

1. div 's va rendre l'un après l'autre s'ils ne sont pas floated
2. div se déplacent l'un à côté de l'autre en cas de flottement à gauche ou à droite

Ok, donc c'est comme ça que les éléments de niveau de bloc se comportent quand ils flottent à gauche ou à droite, alors maintenant pourquoi clear: both; est requis et pourquoi?

donc si vous notez dans la démo de mise en page - dans le cas où vous avez oublié, 1519720920" ici il est..

I suis en utilisant une classe appelée .clear et il détient 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, donc supposons un scénario, où nous avons une piscine, où header est une terre solide, aside et section flottent dans la piscine et pied de page est une terre solide à nouveau, quelque chose comme ceci..

ainsi l'eau bleue n'a aucune idée de ce que la zone des éléments flottants sont, ils peuvent être plus grand que la piscine ou plus petit, donc voici une question commune qui trouble 90% des débutants CSS: pourquoi l'arrière-plan d'un élément de conteneur n'est pas étiré quand il tient des éléments flottants. C'est parce que l'élément conteneur est un POOL ici et le POOL n'a aucune idée combien d'objets sont flottants, ou ce que le la longueur ou la largeur des éléments flottants sont, de sorte qu'il ne sera tout simplement pas étirer.

1. Flux Normal Du Document
2. Sections Flottantes À Gauche
3. Éléments Flottants Dégagés Pour Étirer La Couleur De Fond Du Conteneur

(Voir ^[Clearfix] section de cet répondre de façon soignée pour ce faire. J'utilise un div exemple vide intentionnellement pour l'explication but)

j'ai fourni 3 exemples ci-dessus, le 1er est le flux de document normal où red arrière-plan juste affichera comme prévu puisque le conteneur ne contient pas d'objets flottants.

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

après clear: both; , l'élément du conteneur sera étiré aux dimensions de l'élément flottant.

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

Dites que vous voulez 2 éléments côte à côte et un autre élément au-dessous d'eux... Donc, vous allez flotter 2 éléments à gauche et vous voulez l'autre en dessous d'eux.

1. div flotté à gauche résultant en section se déplaçant dans l'espace restant
2. Flotté div désactivée afin que le section tag rendra en dessous de la flottait div s

---

1er exemple

---

second exemple

enfin et surtout, l'étiquette footer sera rendue après éléments flottants comme j'ai utilisé la classe clear avant de déclarer mes étiquettes footer , ce qui garantit que tous les éléments flottants (gauche/droite) sont dégagés jusqu'à ce point.

---

Clearfix

venant à clearfix qui est lié aux flotteurs. Comme déjà spécifié par @Elky , la façon dont nous nettoyons ces flotteurs n'est pas une manière propre de le faire car nous utilisons un élément vide div qui n'est pas un élément div est destiné. Donc voici le clearfix.

pensez-y comme un élément virtuel qui créera un élément vide pour vous avant la fin de votre élément parent. Ceci effacera automatiquement votre élément enveloppant contenant des éléments flottants. Cet élément n'existera pas dans votre DOM littéralement mais fera le travail.

pour effacer automatiquement tout élément d'enrubannage ayant des éléments flottants, nous pouvons utiliser

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

Note 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 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 flotté div où nous dégageons les flotteurs qui n'est rien d'autre que l'équivalent d'avoir un élément vide div avec clear: both; propriété que nous utilisons pour cela aussi. Maintenant, pourquoi display: table; et content de réponses portée, mais vous pouvez en savoir plus à propos de pseudo element ici .

notez que cela fonctionnera aussi dans IE8 comme IE8 supporte :after pseudo .

---

Réponse Originale:

la plupart des développeurs font flotter leur contenu à gauche ou à droite sur leurs pages, probablement des divs avec logo, sidebar, content etc., ces divs sont flottés à gauche ou à droite, laissant le reste de l'espace non utilisé et par conséquent, si vous placez d'autres conteneurs, il flottera aussi dans l'espace restant, afin d'éviter que clear: both; soit 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 que faire si vous voulez faire l'autre div rendre ci-dessous div1 , donc vous allez utiliser clear: both; afin de vous assurer de nettoyer 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
----------------------------------