Maison > Article > interface Web > 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:381762parcourir

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 :

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>

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;  
}

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;  
}

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!

css Float auto class 外边距 display position margin padding border table

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de CSS en utilisant position:sticky pour implémenter des exemples de mise en page collantsArticle suivant：Explication détaillée de CSS en utilisant position:sticky pour implémenter des exemples de mise en page collants

Articles Liés

Voir plus