Explication détaillée du mode BFC

Cette fois je vais vous apporter une explication détaillée du mode BFC. Quelles sont les précautions lors de l'utilisation du mode BFC Voici un cas pratique, jetons un oeil.

Explication détaillée de BFC【contexte de formatage de bloc】

Vous ne pensez peut-être pas que BFC est une chose courante, mais vous l'utiliserez certainement fréquemment, peut-être n'avez-vous pas pensé à BFC lorsque vous l'avez utilisé. Alors, qu’est-ce que c’est exactement ?

L'explication officielle de BFC est la suivante, éléments flottants et éléments absolument positionnés, conteneurs au niveau bloc de boîtes non au niveau bloc (comme inline-blocks, table-cells et table-captions), et les boîtes au niveau du bloc avec une valeur de débordement autre que « visible » créeront un nouveau contexte de formatage au niveau du bloc pour leur contenu.

Dans un contexte de formatage au niveau du bloc, les cases sont disposées verticalement les unes après les autres en partant du haut du bloc contenant. L'espace vertical entre deux cases est déterminé par leur valeur de marge. Les marges verticales de deux cases adjacentes au niveau du bloc se chevauchent.

Dans un contexte de formatage au niveau du bloc, le bord extérieur gauche (marge-gauche) de chaque boîte touche le bord gauche (bordure-gauche) du conteneur (pour le formatage de droite à gauche). Pour le formatage à gauche, il touche le bord droit), même s'il y a un flottant, sauf si la boîte crée un nouveau contexte de formatage au niveau du bloc.

"block formatting context" est mentionné à plusieurs reprises ci-dessus. Il est évident que BFC est leur abréviation. L'officiel a également "inline formatting context", ce qui signifie que "formatting context" nous devons le regarder de plus près. regardez ce que cela signifie. , puis décomposons-le et jetons un coup d'œil :

formatage : n, la signification du formatage, v, formater (le participe présent de format) ; précise le format (ou la forme) de... , la taille, la proportion, etc.);
contexte : contexte ; environnement

mis en forme signifie "formatage"; context", qui est le contenu de la page. Une zone de rendu avec un ensemble de règles de rendu qui déterminent la façon dont ses éléments enfants seront positionnés, ainsi que leur relation et leur interaction avec d'autres éléments.

Les contextes de formatage les plus courants sont Block fomatting context (BFC en abrégé) et Inline formatting context (IFC en abrégé). Il n'y a que BFC et IFC dans CSS2.1, et GFC et FFC sont également ajoutés dans CSS3

Box est également un concept important. Box est l'objet et l'unité de base de la mise en page CSS. vue, c’est une page composée de nombreuses boîtes. Le type d'élément et l'attribut d'affichage déterminent le type de Box. Différents types de Box participeront à différents Formatting context (un conteneur qui détermine comment restituer le document), de sorte que les éléments de la Box seront rendus de différentes manières.

Par exemple, les éléments avec les valeurs d'attribut d'affichage de bloc, d'élément de liste et de table généreront des boîtes au niveau du bloc. Et participez au contexte de formatage de bloc. boîte de niveau en ligne : les éléments avec les attributs d'affichage inline, inline-block et inline-table généreront une boîte de niveau en ligne. Et impliquez-vous inline formatting context.

Alors comprenons-le en termes simples, BFC signifie « contexte de formatage au niveau du bloc ». L'élément qui crée le BFC est une boîte indépendante, mais seule la boîte au niveau du bloc peut participer à la création du BFC. Il stipule comment la boîte interne au niveau du bloc est disposée, et la disposition dans cette boîte indépendante n'est pas affectée par l'extérieur. Bien entendu, cela n'affectera pas les éléments extérieurs.

Jetons ensuite un œil à quelques caractéristiques des boîtes BFC :

1 Les boîtes internes seront placées les unes après les autres dans le sens vertical, en commençant par le haut.
2. La distance verticale de la Box est déterminée par la marge. Les marges de deux cases adjacentes appartenant au même BFC se chevaucheront.
3. Le côté gauche de la zone de marge de chaque élément est en contact avec le côté gauche de la zone de bordure du bloc contenant (pour un formatage de gauche à droite, sinon l'inverse est vrai). Cela est vrai même s'il y a du flotteur.
4. La zone BFC ne chevauchera pas la boîte flottante.
5. BFC est un conteneur indépendant isolé sur la page. Les sous-éléments à l'intérieur du conteneur n'affecteront pas les éléments à l'extérieur, et vice versa.
6. Lors du calcul de la hauteur de BFC, les éléments flottants participent également au calcul.

Dans quels scénarios BFC peut-il être utilisé ?

1. superposition de marge

Lorsque les cases sont disposées de haut en bas, avec la case supérieure margin-bottom:50px; ; alors quelque chose de magique se produit, si les deux cases sont calculées en fonction de la superposition, la distance devrait être de 100px, mais nous avons constaté que les deux valeurs de marge sont en fait superposées, ne laissant que 50px. Ensuite, à ce moment-là, nous pouvons déclencher le mode BFC. et ajoutez un parent à l'une des cases Level

2. Utilisé pour la mise en page

3 Utilisez pour effacer le flottant et calculer le. Hauteur BFC

Nous avons constaté qu'en raison de la relation flottante entre les deux éléments enfants à l'intérieur, les deux boîtes se sont séparées du bloc conteneur de l'élément parent, et la hauteur de l'élément parent s'est effondré. Nous devons faire en sorte que l'élément parent contienne deux cases Éléments enfants, lors du calcul de la hauteur, deux éléments enfants flottants participeront, nous devons donc fermer le flotteur et déclencher le BFC de l'élément parent, comme overflow: Hidden;

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article , pour un contenu plus passionnant, veuillez faire attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :

Comment utiliser l'héritage de valeur d'attribut en CSS

Css pour créer des effets pointillés

Transition, animation, transformation des attributs CSS3

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!