J'ai déjà entendu quelqu'un mentionner BFC en CSS, et il m'est arrivé de rencontrer le problème de l'effondrement des marges lors de la pratique IFE, alors j'ai justement compris le mécanisme de BFC. (Pour la source de référence, voir Référence à la fin de l'article)
Cet article vous présente principalement les informations pertinentes sur l'utilisation de BFC et IFC en CSS. L'éditeur pense que c'est plutôt bon, je le ferai donc. partagez-le avec vous maintenant et donnez-le comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
1 Qu'est-ce que BFC
Comme tous les articles de blog précédents, commençons par l'introduction du point de vue de Quoi et comprenons BFC du moins profond au plus profond.
Le soi-disant contexte de formatage est un concept de la spécification W3C CSS2.1.
Il s'agit d'une zone de rendu dans la page et possède un ensemble de règles de rendu
Il détermine comment ses éléments enfants seront positionnés, ainsi que leur relation et leur interaction avec d'autres éléments.
Les contextes de formatage de bloc (BFC, contexte de formatage au niveau du bloc) sont les règles de rendu et d'affichage d'un élément au niveau du bloc. En termes simples, BFC peut être compris comme une grande boîte fermée. Les sous-éléments à l'intérieur du conteneur n'affecteront pas les éléments à l'extérieur, et vice versa.
Les règles d'agencement du BFC sont les suivantes :
1 Les caissons internes seront placés un à un dans le sens vertical
2 Le BFC est un conteneur indépendant isolé sur ; la page;
3 Les marges supérieure et inférieure de deux cases adjacentes appartenant au même BFC se chevaucheront
4 Lors du calcul de la hauteur du BFC, les éléments flottants participent également au calcul
5 Le côté gauche ; de chaque élément, et la boîte contenue Le côté gauche de est en contact, même s'il y a float
6 La zone de BFC ne chevauchera pas float
Alors comment déclencher ; BFC ? La fonctionnalité BFC peut être déclenchée tant que l'élément remplit l'une des conditions suivantes :
élément racine du corps
Élément flottant : float ; attribut qui n'est pas nul Valeur ;
Élément positionné de manière absolue : position (absolue, fixe)
l'affichage est : inline-block, table- cellules, flex
overflow Valeurs autres que visibles (caché, auto, scroll)
Les caractéristiques et applications de BFC
Introduction suivante Caractéristiques et applications communes de BFC Lors de l'explication des raisons dans cette section, les règles de mise en page et les conditions de déclenchement ci-dessus seront utilisées, vous devez donc y prêter attention.
1 Les marges verticales de deux éléments de bloc adjacents en écoulement normal vont s'effondrer
<head>
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
</head>
<body>
<p class="p"></p>
<p class="p"></p>
</body>Copier après la connexion
Le rendu est :
Selon Article 3 du règlement BFC :
La distance verticale de la case est déterminée par la marge
Appartenant au même BFC + les marges supérieure et inférieure de deux cases adjacentes se chevaucheront.
La raison pour laquelle les marges s'effondrent dans l'exemple ci-dessus est qu'elles appartiennent toutes les deux à l'élément racine du corps, nous devons donc faire en sorte qu'elles n'appartiennent pas au même BFC pour éviter l'effondrement des marges :
<p class="p"></p>
<p class="wrap">
<p class="p"></p>
</p>
Copier après la connexion
.wrap {
overflow:hidden;
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;Copier après la connexion
Le rendu est :
2 BFC peuvent contenir des éléments flottants (flottant clair)
Dans des circonstances normales, des éléments flottants Ce sera séparé du flux de documents ordinaire, donc dans le code suivant :
<p style="border: 1px solid #000;">
<p style="width: 50px; height: 50px; background: #eee;
float: left;">
</p>
</p>Copier après la connexion
Le p externe ne pourra pas contenir le p flottant interne. L'effet est illustré dans la figure ci-dessous :
Mais si l'on déclenche le BFC du conteneur externe, selon l'article 4 du cahier des charges BFC : Lors du calcul de la hauteur du BFC, l'élément flottant participe également au calcul, puis l'extérieur p conteneur peut envelopper l'élément flottant, il suffit donc de modifier le code comme suit :
<p style="border: 1px solid #000;overflow: hidden">
<p style="width: 100px;height: 100px;background: #eee;float: left;"></p>
</p>
Copier après la connexion
peut obtenir les effets suivants :
3 BFC peut empêcher éléments d'être recouverts par des éléments flottants
Regardons d'abord un exemple :
<p class="aside"></p>
<p class="main"></p>
p {
width:300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}
.main {
height:200px;
background-color:red;
}Copier après la connexion
Le rendu est :
La raison pourquoi c'est le cas à cause de la règle 5 ci-dessus : Le côté gauche de chaque élément, et contient Le côté gauche de la boîte est en contact, même s'il y a du float
Donc si vous voulez changer le; pour le rendre complémentaire et interférer, vous devez utiliser la règle 6 : la zone deBFC ne chevauchera pas float, let
peut également déclencher les propriétés de BFC, c'est-à-dire :
.main {
overflow:hidden;
height:200px;
background-color:red;
}Copier après la connexion
De cette façon, il peut être utilisé pour implémenter une disposition adaptative de deux colonnes.
3 Brève introduction à IFC
Règles de disposition IFC :
1 Les cases seront placées horizontalement les unes après les autres en partant du haut du bloc contenant.
2 Lors du placement de ces cases, l'espace occupé par leurs marges intérieures et extérieures + bordures dans le sens horizontal sera pris en compte dans le sens vertical, ces cases pourront être alignées sous différentes formes : marge horizontale, Remplissage et les bordures sont valides, mais la verticale n'est pas valide. La largeur et la hauteur ne peuvent pas être spécifiées ;
3 La largeur de la zone de ligne est déterminée par le bloc conteneur et la hauteur de la zone de ligne est déterminée par la hauteur de la ligne.
Recommandations associées :
Explication détaillée de l'important BFC en CSS
À propos de la question du BFC et de l'effondrement en hauteur
Qu'est-ce que BFC ? Une compréhension simple de 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
