Explication détaillée des BFC importants en CSS

Dans cet article, nous partageons principalement avec vous une explication détaillée du BFC important en CSS. Il existe un concept important de BFC en CSS. Comprendre BFC peut nous aider à comprendre certains des endroits initialement étranges (??) dans CSS.

1. Introduction

Avant d'expliquer BFC, parlons du flux de documents. Le flux de documents dont nous parlons souvent est en fait divisé en trois types : Flux positionné, Flux flottant et Flux normal. Le flux ordinaire fait en réalité référence au FC dans BFC. FC (Formatting Context), traduit littéralement par contexte de formatage, est une zone de rendu dans la page. Elle comporte un ensemble de règles de rendu qui déterminent la manière dont ses sous-éléments sont disposés ainsi que leur relation et leur rôle avec d'autres éléments. Les FC courants incluent BFC, IFC, GFC et FFC.

BFC(Contexte de formatage de bloc) Le contexte de formatage au niveau du bloc est une zone de rendu utilisée pour disposer les boîtes au niveau du bloc, ou une règle de rendu sous certaines conditions.

Explication sur MDN : BFC est la partie de rendu visuel CSS de la page Web. C'est la zone où se produit la disposition des boîtes au niveau des blocs et où les éléments flottants interagissent avec d'autres éléments.

2. Méthode de déclenchement BFC

1. élément racine, c'est-à-dire la balise HTML

2. La valeur de float n'est pas nulle. , c'est left, right

3. la valeur de débordement n'est pas visible, mais est auto, scroll, hidden

4. valeur d'affichage Pour inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid

5. la valeur de position est absolute, fixed

Remarque : display:table peut également générer du BFC car Table générera par défaut une cellule de tableau anonyme, qui est générée par cet anonyme table-ccell BFC.

3. Règles de contrainte

Règles de contrainte du navigateur pour la zone BFC :

1. Les éléments enfants de l'élément BFC généré seront placés les uns après les autres. . Leur point de départ dans la direction verticale est le haut d'un bloc conteneur, et la distance verticale entre deux éléments enfants adjacents dépend de la propriété margin de l'élément. Dans BFC, les marges des éléments adjacents au niveau du bloc seront réduites (Maîtrise de l’effondrement des marges).

2. Générer un élément BFC dans lequel la marge gauche de chaque élément enfant touche le bord gauche du bloc conteneur (pour un formatage de droite à gauche, la marge droite touche la bordure droite) , même si l'élément est flottant (bien que la zone de contenu de l'élément enfant soit compressée en raison du flottement), à moins que l'élément enfant ne crée également un nouveau BFC (par exemple, s'il s'agit lui-même d'un élément flottant).

Interprétation des règles :

1. Les Boites internes seront placées les unes après les autres dans le sens vertical

2. La distance verticale de la boîte intérieure est déterminée par la marge. (L'énoncé complet est le suivant : les marges de deux cases adjacentes appartenant au même BFC seront pliées, mais des BFC différents ne seront pas pliés.)

3. La marge gauche de chaque élément est la idem Les bords gauches des blocs conteneurs se touchent (de gauche à droite), même pour les éléments flottants. (Cela montre que le sous-élément dans BFC ne dépassera pas son bloc conteneur, tandis que l'élément avec une position absolue peut dépasser la limite de son bloc conteneur)

4. La zone de ​​BFC ne chevauchera pas l'élément flottant Superposition de zone

5. Lors du calcul de la hauteur de BFC, les éléments enfants flottants participent également au calcul

4. Fonction

BFC est la page Un conteneur indépendant isolé sur le conteneur, les éléments enfants à l'intérieur du conteneur n'affecteront pas les éléments externes, et vice versa. Nous pouvons utiliser cette fonctionnalité de BFC pour faire beaucoup de choses.

4.1 Empêcher les éléments d'être couverts par des éléments flottants

Un élément bloc dans le flux de documents normal peut être couvert par un élément float, occupant le flux de documents normal, vous pouvez donc définir le flottant, l'affichage et la position des valeurs d'un élément Déclenchez BFC d'une autre manière pour éviter d'être couvert par des boîtes flottantes.
Voir DEMO

4.2 Des éléments flottants peuvent être inclus

En modifiant la valeur d'attribut de la boîte parent contenant l'élément enfant flottant, BFC est déclenché pour contenir la boîte flottante de l'élément enfant .
Voir DEMO

4.3 Empêcher la fusion des marges d'éléments adjacents

Les marges supérieure et inférieure de deux sous-éléments adjacents au niveau bloc appartenant au même BFC se chevaucheront (définir l'écriture -mode :tb-rl, les marges horizontales se chevaucheront). Par conséquent, le chevauchement des marges peut être évité lorsque deux éléments enfants adjacents au niveau du bloc appartiennent à des BFC différents.
Ici, un p est enroulé autour de l'extérieur de toute boîte adjacente au niveau du bloc. En modifiant les attributs de ce p, les deux boîtes d'origine appartiennent à deux BFC différents pour éviter le chevauchement des marges.

Voir la DÉMO

Mais voici une question :
S'il est enveloppé d'une couche de p, la définition de tout attribut pouvant déclencher BFC peut empêcher les éléments adjacents d'être les marges fusionnent. Comme ils appartiennent à des BFC différents, la fusion des marges ne se produira pas.
Si vous n'incluez pas de p à l'extérieur, définir display sur inline-block, inline-flex, table-captain, position sur absolue, fixe et float à gauche ou à droite peut empêcher la fusion des marges. Voici la question :

Nous savons que la définition de position et float fera sortir l'élément du flux de documents et créera un nouveau BFC, de sorte que les deux éléments ne sont pas des éléments adjacents, cela peut donc empêcher les marges des éléments adjacents de fusionner, mais en ligne -block et inline-flex , inline-grid, table-captain pourquoi ? Si quelqu'un sait pourquoi, faites-le moi savoir ~

Recommandations associées :

BFC caché dans CSS

Qu'est-ce que BFC ? Une compréhension simple de bfc

Définition flottante et compensation flottante (BFC)

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!