Que fait la règle CSS «clair: les deux»?


293

Que fait la règle CSS suivante:

.clear { clear: both; }

Et pourquoi devons-nous l'utiliser?


22
Lorsque vous utilisez CSS floatet que vous souhaitez l'élément suivant ci-dessous, pas à droite ou à gauche.
Riz

Aucun élément flottant n'est autorisé à gauche et à droite d'un élément spécifié lorsque l'élément est utilisé avec clear: both
JackXu

Réponses:


687

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 ...

entrez la description de l'image ici

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

Code pour démo

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 ..

Vue flottante

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.

entrez la description de l'image ici

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

entrez la description de l'image ici

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

entrez la description de l'image ici


2ème exemple

entrez la description de l'image ici

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.

Clearfix

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

3
Si vous n'avez jamais entendu parler de flotteurs, je vous suggère de lire d'abord une introduction aux flotteurs --- par exemple, voir le lien dans la réponse suivante. Revenez ensuite et lisez cette réponse - cela aura du sens.
osa

37
Prenez note, les flotteurs n'ont pas été inventés à l'origine pour avoir deux éléments de niveau de bloc côte à côte, ce n'est que l'effet secondaire! Le but initial était de permettre au texte de circuler autour des images en ligne, de sorte que vous flottiez les images dans les deux sens.
Madara's Ghost

3
Réponse courte connexe à consulter avant de lire ceci, juste pour avoir une idée générale .. stackoverflow.com/questions/16568272/…
M. Alien

@ mr-alien Bon exemple, cependant dans le cas de jsfiddle.net/N82UD/1 lorsque vous réduisez l'écran, il y a un problème avec float et l'élément " cleared " ne suit pas le flux: jsfiddle.net/N82UD/138 It prend l'espace de l'élément flottant 2
Omar

1
@Carlo: une alternative très utilisée dans les modèles comme Twitter Bootstrap par exemple; est de mettre display: inline-blocksur un élément, et sur le parent que vous pouvez utiliser text-align: left, text-align: centerou text-align: rightpar exemple.
Daan

39

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

clear: left; Élément poussé sous les éléments flottants à gauche

clear: right; Élément poussé en dessous des éléments flottants à droite

clear: both; Élément poussé sous tous les éléments flottants

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


1
Excellent. C'est la meilleure réponse. Je me demande pourquoi une autre réponse a été acceptée.
sawa

Que se passera-t-il si nous display: inline-block;supprimons la propriété css de ce scénario? Il étendra l' inline-blockélément parent à son élément frère qui a une classe float-left. Ce qui rend "clair n'affecte pas les flottants en dehors du contexte de formatage de bloc actuel" incorrect. Quelqu'un pourrait-il expliquer s'il vous plaît?
Sashrika Waidyarathna

@SashrikaWaidyarathna: un élément parent ne génère pas nécessairement un contexte de mise en forme de bloc pour ses enfants. Dans votre exemple (a) la suppression display: inline-blocksignifie qu'elle ne génère plus de contexte de formatage de bloc (b) les éléments flottants / effacés à l'intérieur de cet élément et le premier élément flottant font tous partie du même contexte de formatage de bloc (la fenêtre d'affichage).
Salman A

@SalmanA, merci pour l'explication faisant référence à la spécification css. Je n'étais pas au courant de la définition du contexte de formatage de bloc.
Sashrika Waidyarathna

2
Sundar Pichai doppelganger?
Manoj Kumar


13

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.


Cet autre article a plus de détails sur clearfix: stackoverflow.com/questions/211383/…
Bill Hoag

2

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:


3
Quel tutoriel?
Peter Mortensen
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.