Que fait la règle CSS suivante:
.clear { clear: both; }
Et pourquoi devons-nous l'utiliser?
Que fait la règle CSS suivante:
.clear { clear: both; }
Et pourquoi devons-nous l'utiliser?
Réponses:
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.
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
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.
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 aside
balise 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.
Donc, comme vous le constatez, la gauche flottante div
laisse l'espace à sa droite inutilisé, ce qui permettra à l' div
after de se déplacer dans l'espace restant.
div
s'afficheront les uns après les autres s'ils ne sont PAS flottésdiv
se déplacera les uns à côté des autres s'il flotte à gauche ou à droiteOk, 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 .clear
et elle contient une propriété appelée clear
avec une valeur de both
. Voyons donc pourquoi il en a besoin both
.
J'ai flotté aside
et des section
éléments à gauche, alors supposez un scénario, où nous avons une piscine, où header
est un terrain solide, aside
et section
flottons 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.
(Reportez-vous à la section [Clearfix] de cette réponse pour une manière claire de le faire. J'utilise div
intentionnellement un exemple vide à des fins d'explication)
J'ai fourni 3 exemples ci-dessus, le premier est le flux de documents normal où l' red
arriè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.
div
Flotté à gauche entraînant un section
déplacement dans l'espace restantdiv
effacé de sorte que la section
balise restituera en dessous du flottant div
s Enfin et surtout, la footer
balise sera rendue après les éléments flottants comme j'ai utilisé la clear
classe avant de déclarer mes footer
balises, ce qui garantit que tous les éléments flottants (gauche / droite) sont effacés jusqu'à ce point.
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 :after
pseudo-é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 div
où 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 content
hors 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 :after
pseudo .
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.
------------------ ----------------------------------
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
----------------------------------
display: inline-block
sur un élément, et sur le parent que vous pouvez utiliser text-align: left
, text-align: center
ou text-align: right
par exemple.
La clear
proprié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 flottantsclear: left;
Élément poussé sous les éléments flottants à gaucheclear: right;
Élément poussé en dessous des éléments flottants à droiteclear: both;
Élément poussé sous tous les éléments flottantsclear
n'affecte pas les flottants en dehors du contexte de formatage de bloc actueldisplay: 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?
display: inline-block
signifie 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).
Essayez simplement de supprimer la clear:both
propriété du div
with class
sample
et 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 div
en 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.
clearfix
: stackoverflow.com/questions/211383/…
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:
float
et que vous souhaitez l'élément suivant ci-dessous, pas à droite ou à gauche.