Maison >interface Web >tutoriel CSS >Analyse d'exemples d'utilisation de BFC et IFC en CSS
Analyse d'exemples d'utilisation de BFC et IFC en CSS
- 小云云original
- 2018-02-02 10:44:381823parcourir
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>
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>
.wrap {
overflow:hidden;
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
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>
Le p externe ne pourra pas contenir le p flottant interne. L'effet est illustré dans la figure ci-dessous :
<p style="border: 1px solid #000;overflow: hidden"> <p style="width: 100px;height: 100px;background: #eee;float: left;"></p> </p>peut obtenir les effets suivants :
<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;
}Le rendu est :
peut également déclencher les propriétés de BFC, c'est-à-dire :
.main {
overflow:hidden;
height:200px;
background-color:red;
}De cette façon, il peut être utilisé pour implémenter une disposition adaptative de deux colonnes. 3 Brève introduction à IFCRè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!