Maison > Article > interface Web > 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.
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.
élément racine, c'est-à-dire la balise HTML
La valeur de float n'est pas nulle. , c'est left
, right
la valeur de débordement n'est pas visible, mais est auto
, scroll
, hidden
valeur d'affichage Pour inline-block
, table-cell
, table-caption
, flex
, inline-flex
, grid
, inline-grid
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.
Règles de contrainte du navigateur pour la zone BFC :
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).
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 :
Les Boites internes seront placées les unes après les autres dans le sens vertical
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.)
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)
La zone de BFC ne chevauchera pas l'élément flottant Superposition de zone
Lors du calcul de la hauteur de BFC, les éléments enfants flottants participent également au calcul
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.
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
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
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 :
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!