Un contexte de formatage de blocs fait partie du rendu CSS visuel d'une page Web dans laquelle les boîtes de bloc sont disposées. Le schéma de positionnement auquel il appartient est un flux normal. Selon W3C:
flotte, éléments absolument positionnés, blocs en ligne, cellules de table, captions de table et éléments avec `` débordement '' autre que «visible» (sauf lorsque cette valeur a été propagée à la fenêtre) établissant de nouveaux contextes de formatage de blocs.
La citation ci-dessus résume à peu près la façon dont un contexte de formatage de blocs est formé. Mais permet de le redéfinir d'une manière plus facile à comprendre. Un contexte de formatage de blocs est une boîte HTML qui satisfait au moins l'une des conditions suivantes:
Un contexte de formatage de bloc peut être explicitement déclenché. Donc, si nous voulons créer un nouveau contexte de formatage de blocs, nous devons simplement y ajouter l'une des conditions CSS mentionnées ci-dessus.
Par exemple, regardez le HTML suivant:
<span><span><span><div</span> class<span>="container"</span>></span> </span> Some Content here <span><span><span></div</span>></span></span>
Un nouveau contexte de formatage de blocs peut être créé en ajoutant l'une des conditions CSS nécessaires comme le débordement: défilement, débordement: caché, affichage: flex, flottant: gauche ou affichage: table dans le conteneur. Bien que l'une des conditions mentionnées ci-dessus puisse créer un contexte de formatage de blocs, il y aura également d'autres effets comme:
Ainsi, chaque fois que nous créons un nouveau contexte de formatage de blocs, nous choisissons la meilleure condition en fonction de nos exigences. Pour l'uniformité, j'ai utilisé le débordement: caché dans tous les exemples donnés dans cet article.
<span><span><span><div</span> class<span>="container"</span>></span> </span> Some Content here <span><span><span></div</span>></span></span>
Vous êtes libre de jouer avec des déclarations autres que le débordement: caché.
La spécification W3C indique:
Dans un contexte de formatage de bloc, le bord extérieur gauche de chaque boîte touche le bord gauche du bloc contenu (pour le formatage droit à gauche, les bords droits touchent). Cela est vrai même en présence de flotteurs (bien que les boîtes de ligne d'une boîte puissent rétrécir en raison des flotteurs), à moins que la boîte établit un nouveau contexte de formatage de blocs (auquel cas la boîte elle-même peut devenir plus étroit en raison des flotteurs).
en mots plus simples, comme nous pouvons le voir dans le diagramme ci-dessus, toutes les cases appartenant à un contexte de mise en forme de bloc sont alignées à gauche (pour la mise en forme de gauche à droite) et leur bord extérieur gauche touche le bord gauche du contenant de la contenu bloc. Dans la dernière boîte, nous pouvons voir que même s'il y a un élément flotté (brun) à gauche, l'autre élément (vert) touche toujours la marge gauche du bloc contenant. Les principes expliquent pourquoi cela se produit sera discuté ci-dessous dans la section sur l'enveloppe de texte.
Dans le flux normal, les boîtes sont posées verticalement les autres à partir du haut du bloc contenant. La distance verticale entre deux therères et sœurs est déterminée par les marges individuelles des deux frères et sœurs, mais ce n'est pas la somme des deux marges.
Permet de considérer un exemple, afin de comprendre cela.
Dans le diagramme ci-dessus, nous considérons un contexte de formatage de bloc ayant été créé lorsque la boîte rouge (une div) contient les deux frères et sœurs verts (éléments p).
<span><span>.container</span> {
</span> <span>overflow: hidden;
</span><span>}</span>et le CSS correspondant est:
<span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><p</span>></span>Sibling 1<span><span></p</span>></span> </span> <span><span><span><p</span>></span>Sibling 2<span><span></p</span>></span> </span><span><span><span></div</span>></span></span>
Idéalement, la marge entre les deux frères et sœurs aurait dû être la somme des marges des deux éléments (20px) mais elle est en fait 10px. Ceci est connu sous le nom de marges d'effondrement. Dans un cas où les marges des frères et sœurs sont différentes, alors la marge supérieure prévaudra.
Voir le stylo ovzrer par SitePoint (@SitePoint) sur Codepen.
Cela peut sembler un peu déroutant au début, car nous avons discuté ci-dessus de ces contextes de formatage de blocs provoquent l'effondrement de la marge. Mais une chose que nous devons garder à l'esprit est que les marges verticales entre les boîtes de blocs adjacentes (frères et sœurs) ne s'effondrent que si elles sont dans le même contexte de formatage de bloc. S'ils appartiennent à différents contextes de formatage de blocs, les marges entre elles ne s'effondreront pas. Ainsi, en créant un nouveau contexte de formatage de blocs, nous pouvons empêcher l'effondrement de la marge.
Ajoutons un troisième frère dans l'exemple précédent, donc le HTML devient:
<span><span><span><div</span> class<span>="container"</span>></span> </span> Some Content here <span><span><span></div</span>></span></span>
avec le CSS correspondant étant:
<span><span>.container</span> {
</span> <span>overflow: hidden;
</span><span>}</span>Le résultat sera le même que ci-dessus, c'est-à-dire qu'il y aura un effondrement et les trois frères et sœurs seront séparés par une distance verticale de 10px. Cela se produit parce que les trois balises P sont la partie du même contexte de formatage de bloc.
Permet maintenant de modifier le troisième frère afin qu'il fasse partie d'un nouveau contexte de formatage de blocs. Alors le HTML devient:
<span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><p</span>></span>Sibling 1<span><span></p</span>></span> </span> <span><span><span><p</span>></span>Sibling 2<span><span></p</span>></span> </span><span><span><span></div</span>></span></span>
et le CSS:
<span><span>.container</span> {
</span> <span>background-color: red;
</span> <span>overflow: hidden; /* creates a block formatting context */
</span><span>}
</span>
<span>p {
</span> <span>background-color: lightgreen;
</span> <span>margin: 10px 0;
</span><span>}</span>Maintenant, il y aura une différence dans la sortie:
Étant donné que les deuxième et troisième frères et sœurs appartiennent à différents contextes de formatage, il n'y aura pas d'effondrement de marge entre eux, comme le montre la démo suivante.
Voir le stylo xbvoxp par SitePoint (@SitePoint) sur Codepen.
Un contexte de formatage de bloc peut contenir des flotteurs. Plusieurs fois, nous rencontrerons une situation où un conteneur a des éléments flottants. Dans ce cas, l'élément de conteneur n'a pas de hauteur et ses enfants flottants sont en dehors du flux normal de la page. Nous utilisons généralement une correction claire pour résoudre ce problème, la méthode la plus populaire étant l'utilisation d'un pseudo-élément «effacé». Mais nous pouvons également y parvenir en définissant un contexte de formatage de blocs.
Permet de regarder un exemple:
<span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><p</span>></span>Sibling 1<span><span></p</span>></span> </span> <span><span><span><p</span>></span>Sibling 2<span><span></p</span>></span> </span> <span><span><span><p</span>></span>Sibling 3<span><span></p</span>></span> </span><span><span><span></div</span>></span></span>
avec le CSS:
<span><span>.container</span> {
</span> <span>background-color: red;
</span> <span>overflow: hidden; /* creates a block formatting context */
</span><span>}
</span>
<span>p {
</span> <span>background-color: lightgreen;
</span> <span>margin: 10px 0;
</span><span>}</span>Dans le cas ci-dessus, le conteneur n'aura aucune hauteur et il ne contiendra pas les enfants flottés. Pour résoudre ce problème, nous établissons un nouveau contexte de formatage de bloc à l'intérieur du conteneur en ajoutant un débordement: caché. Le CSS modifié devient:
<span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><p</span>></span>Sibling 1<span><span></p</span>></span> </span> <span><span><span><p</span>></span>Sibling 2<span><span></p</span>></span> </span> <span><span><span><div</span> class<span>="newBFC"</span>></span> </span> <span><span><span><p</span>></span>Sibling 3<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
Maintenant, le conteneur contiendra les frères et sœurs flottés et sa hauteur se développera pour contenir ses enfants, avec les éléments de retour dans le flux normal de la page dans ce contexte de formatage.
Voir le stylo flotte avec et sans contexte de formatage de blocs par SitePoint (@SitePoint) sur Codepen.
Parfois, le texte autour d'une div flottante s'enroule autour (comme dans la figure 1 dans l'image ci-dessous) mais dans certains cas, ce n'est pas souhaitable et nous voulons une apparence comme dans la figure 2. Pour résoudre ceci, nous pourrions utiliser des marges, Mais nous pouvons également résoudre ce problème avec un contexte de formatage de blocs.
Faisons d'abord comprendre pourquoi le texte s'enroule. Pour cela, nous devons comprendre comment fonctionne le modèle de boîte lorsqu'un élément est flotté. C'est la partie que j'ai laissée plus tôt tout en discutant de l'alignement dans un contexte de formatage de bloc. Comprenons ce qui se passe dans la figure 1 dans le diagramme ci-dessous:
Le HTML pour le diagramme pourrait être supposé:
<span><span><span><div</span> class<span>="container"</span>></span> </span> Some Content here <span><span><span></div</span>></span></span>
La zone noire entière dans le diagramme ci-dessus désigne l'élément P. Comme nous pouvons le voir, l'élément P ne change pas mais il passe sous l'élément flottant. Les boîtes de ligne de l'élément P (se référant aux lignes de texte) subissent un décalage. D'où les boîtes de ligne étroites horizontalement pour faire de la place pour l'élément flottant.
À mesure que le texte augmente, il finira par envelopper sous l'élément flottant car les boîtes de ligne n'ont plus besoin de se déplacer et donc une condition comme la figure 1 apparaît. Cela explique comment les paragraphes touchent le bord gauche de la boîte de contenant même lorsqu'un élément flottant est présent et comment les boîtes de ligne se rétrécissent pour s'adapter à l'élément flotté.
Si nous sommes en mesure de déplacer l'ensemble de l'élément P, alors ce problème d'emballage sera résolu.
Avant d'aller à la solution, rappelons à nouveau ce que dit la spécification W3C:
Dans un contexte de formatage de bloc, le bord extérieur gauche de chaque boîte touche le bord gauche du bloc contenu (pour le formatage droit à gauche, les bords droits touchent). Cela est vrai même en présence de flotteurs (bien que les boîtes de ligne d'une boîte puissent rétrécir en raison des flotteurs), à moins que la boîte établit un nouveau contexte de formatage de blocs (auquel cas la boîte elle-même peut devenir plus étroit en raison des flotteurs).
Selon cela, si l'élément P établit un nouveau contexte de formatage de blocs, il ne touchera plus le bord gauche du bloc de conteneur. Cela peut être réalisé en ajoutant simplement un débordement: caché à l'élément p. De cette façon, la création d'un nouveau contexte de formatage de blocs résout le problème de l'enroulement de texte autour d'un objet flotté.
Voir le stylo de formatage du stylo empêchant la pellicule de texte par SitePoint (@SitePoint) sur Codepen.
Si nous créons une disposition multi-colonnes couvrant toute la largeur du conteneur, la dernière colonne passera parfois à la ligne suivante dans certains navigateurs. Cela peut se produire parce que le navigateur arrose la largeur de la colonne et la largeur totale devient plus que celle du conteneur. Si, cependant, nous établissons un nouveau contexte de formatage de blocs dans une colonne de la disposition, il faudra toujours l'espace restant à gauche après que les colonnes précédentes se soient remplies.
Utilisons un exemple de disposition multi-colonnes avec 3 colonnes:
Voici le HTML:
<span><span><span><div</span> class<span>="container"</span>></span> </span> Some Content here <span><span><span></div</span>></span></span>
et le CSS:
<span><span>.container</span> {
</span> <span>overflow: hidden;
</span><span>}</span>Le résultat est dans la démo de codepen:
Voir le stylo à l'aide d'un contexte de formatage de blocs pour faire une colonne finale «Fit» par SitePoint (@SitePoint) sur Codepen.
Maintenant, même si la largeur du conteneur change légèrement, la disposition ne se casse pas. Bien sûr, ce n'est pas nécessairement une bonne option pour les dispositions multi-colonnes, mais c'est une façon d'éviter le problème de la chute de la colonne finale. Flexbox serait probablement une meilleure solution dans un cas comme celui-ci, mais cela devrait servir à illustrer comment les éléments se comportent dans ces circonstances.
J'espère que ce post vous a montré la pertinence des contextes de formatage des blocs et comment ils affectent le positionnement visuel des éléments sur une page. Les exemples montrant leur utilisation dans des cas pratiques devraient les rendre un peu plus clairs.
Si vous avez quelque chose à ajouter, veuillez nous le faire savoir dans les commentaires. Et assurez-vous de revoir la discussion plus détaillée du W3C sur le sujet si vous voulez aller plus loin.
Le contexte de formatage des blocs (BFC) est un concept fondamental de CSS qui contrôle la disposition des éléments sur une page Web. Il joue un rôle crucial dans le positionnement et le style des éléments, en particulier dans les dispositions complexes. Les BFC aident à isoler les sections du document, contenant des flotteurs, des blocs en ligne et des tables, ce qui peut empêcher le chevauchement inattendu des éléments. La compréhension des BFC peut aider les développeurs à créer des conceptions plus robustes et prévisibles.
Dans un BFC, les éléments flottants sont contenus dans le contexte, ce qui signifie Ils n'affectent pas la disposition des éléments à l'extérieur du BFC. Ceci est particulièrement utile lorsque vous souhaitez empêcher le texte ou d'autres éléments de s'enrouler autour d'un élément flottant. En créant un nouveau BFC, vous pouvez vous assurer que l'élément flottant n'interfère pas avec le positionnement d'autres éléments.
Il existe plusieurs façons d'établir un nouveau BFC dans CSS. Certaines des méthodes les plus courantes incluent la définition de la propriété CSS «Afficher» sur «flux-racine», «flex» ou «grille», ou définir «débordement» à autre chose que «visible». D'autres propriétés qui créent un nouveau BFC incluent «contenir» si sa valeur est «disposition», «peinture» ou une valeur composite comprenant l'une ou l'autre, et «Count-Count» ou «colonne» s'ils ont une valeur autre que «auto».
L'une des principales caractéristiques des BFC est qu'elles empêchent l'effondrement de la marge. Dans CSS, les marges verticales adjacentes peuvent parfois s'effondrer en une seule marge, qui est le maximum des marges individuelles. Cependant, dans un BFC, la marge supérieure du premier enfant et la marge inférieure du dernier enfant ne s'effondrent pas avec les marges du BFC lui-même. Cela peut être utile pour contrôler l'espacement des éléments.
Lorsque le contenu d'un élément déborde de sa boîte, BFC peut aider à gérer ce débordement. Si un élément crée un nouveau BFC, tout débordement sera coupé vers le BFC, plutôt que de déborder. Cela peut être contrôlé à l'aide de la propriété «débordement», avec des valeurs telles que «auto», «défilement» ou «cachée».
La propriété «claire» dans CSS est utilisée pour contrôler l'écoulement des éléments flottants. Dans un BFC, la propriété «claire» affecte uniquement les éléments au sein du même BFC. Cela signifie qu'un élément avec un ensemble `` clair '' ne se déplacera pas en dessous des flotteurs dans un BFC parent, ne flotte uniquement dans son propre BFC.
Oui, BFCS peut être imbriqué les uns dans les autres. Chaque BFC opère indépendamment de son parent et de ses frères et sœurs BFC. Cela signifie que les flotteurs, les marges et d'autres fonctionnalités de mise en page sont contenus dans chaque BFC, et n'affectent pas les éléments dans d'autres BFC.
Les dispositions de flexion et de grille dans CSS créent automatiquement de nouveaux BFC. Cela signifie qu'ils contiennent leurs flotteurs et empêchent l'effondrement de la marge et débordent de la même manière que les autres BFC. La compréhension des BFC peut donc être utile pour comprendre le comportement des dispositions flexibles et de grille.
BFC et le contexte d'empilement sont deux concepts distincts dans CSS , mais ils peuvent interagir dans certaines situations. Par exemple, un nouveau contexte d'empilement peut être créé par un élément avec une valeur «position» de «relative» ou «absolu» et une valeur «z-index» autre que «auto». Cela peut affecter le rendu des éléments dans un BFC, en particulier en relation avec les flotteurs et le chevauchement.
La plupart des navigateurs modernes gèrent les BFC correctement et cohérentes. Cependant, il peut y avoir quelques différences dans les navigateurs plus âgés, en particulier Internet Explorer. C'est toujours une bonne idée de tester vos dispositions dans plusieurs navigateurs pour s'assurer qu'ils se comportent comme prévu.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
