Qu’est-ce que le contexte de formatage au niveau du bloc ? Le rôle de la création d'un contexte de formatage au niveau du bloc (code ci-joint)

(Contexte de formatage de bloc) est littéralement traduit par « contexte de formatage au niveau du bloc ». Il s'agit d'une zone de rendu indépendante à laquelle seule la zone de niveau bloc participe. Elle stipule la manière dont la zone de niveau bloc interne est disposée et n'a rien à voir avec l'extérieur de cette zone. Alors, comment créer un contexte de formatage au niveau du bloc et quel est le rôle d'un contexte de formatage ? L'article suivant vous expliquera le contexte de formatage au niveau du bloc.

Le flux documentaire dont nous parlons souvent est en réalité divisé en trois types : le flux de positionnement, le flux flottant et le flux ordinaire. Le flux ordinaire fait en réalité référence au FC dans BFC.
FC est l'abréviation de contexte de formatage, qui signifie littéralement contexte de formatage. Il s'agit d'une zone de rendu dans la page. Elle possède un ensemble de règles de rendu qui déterminent la disposition de ses sous-éléments et leurs relations avec d'autres éléments. effet.

Une explication plus simple :

BFC peut être simplement compris comme un attribut CSS d'un certain élément, mais cet attribut ne peut pas être s'il est explicitement modifié par le développeur, les éléments avec cet attribut montreront certaines caractéristiques aux éléments internes et aux éléments externes. Il s'agit de BFC.

La condition de déclenchement de BFC est la condition de création d'un contexte de formatage au niveau du bloc :

==BFC peut être déclenché si l'une des conditions suivantes is met==

【1】Élément racine, c'est-à-dire élément HTML

【2】La valeur de float n'est pas nulle

【3】La valeur de débordement n'est pas visible

【4】La valeur de l'affichage est inline-block, table-cell, table-caption

【5】La valeur de la position est absolue ou fixe

Règles de création du contexte de formatage (BFC) :

1 Les Box internes seront placées les unes après les autres dans le sens vertical.

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 case de marge de chaque élément est en contact avec le côté gauche de la case de bordure du bloc contenant (pour la gauche à droite). formatage correct, sinon c'est le contraire). 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 isolé et indépendant 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 du BFC, les éléments flottants participent également au calcul.

Règle de disposition du BFC 1 : Les boîtes internes seront placées les unes après les autres dans le sens vertical.

La boîte dont nous parlons habituellement est composée d'une marge, d'une bordure, d'un remplissage et d'un contenu. En fait, les quatre côtés de chaque type définissent une boîte, qui sont la zone de contenu, la zone de remplissage, la zone de bordure et la zone de marge. Les types de boîtes existent toujours, même si leur valeur est 0. La marge-boîte détermine la distance verticale entre une boîte de bloc et les boîtes de bloc adjacentes dans le bloc conteneur.

Règle de disposition BFC 2 : La distance verticale de la Boîte est déterminée par la marge. Les marges de deux cases adjacentes appartenant au même BFC se chevaucheront.

Ce qui détermine l'espacement vertical entre la zone de bloc et la zone de bloc adjacente dans le bloc conteneur est la zone de marge

Règle de disposition BFC 3 : Le côté gauche de la zone de marge de chaque élément et le bloc contenant Les côtés gauches des cases de bordure se touchent (pour un formatage de gauche à droite, sinon l'inverse est vrai). Cela est vrai même s'il y a du flotteur.

<div class="parent">
    <div class="child"></div>    //给这两个子div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将下面两个div包裹，但还是在父div的范围之内。
    <div class="child"></div>
</div>

Analyse : ajoutez des flotteurs aux deux ps enfants. En raison des flotteurs, si les flotteurs ne sont pas effacés, le parent p n'enveloppera pas les deux ps suivants, mais il sera toujours à l'intérieur. la portée du parent p. Flottant à gauche signifie que le côté gauche de l'enfant p touche le côté gauche de la bordure du parent p. La droite flottante signifie que l'enfant p touche le côté droit de la bordure du parent p. la marge est définie pour augmenter la distance, cette règle est toujours la même.

Règle de mise en page BFC 4 : La zone BFC ne chevauchera pas la boîte flottante :

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {            
 width: 100px;            
 height: 150px;            
 float: left;            
 background: #f66;
        }
  .main {            
  height: 200px;            
  overflow: hidden;//触发main盒子的BFC            
  background: #fcc;
        }
  .text{            
  width: 500px;
    }

La boîte ci-dessus a un attribut flottant, couvrant le contenu de la boîte principale, et le la boîte principale ne dégage pas le flotteur de la boîte. Il suffit d'une seule action, qui consiste à déclencher son propre BFC, et il n'est alors plus couvert par la case de côté. Par conséquent : la zone BFC ne chevauchera pas la boîte flottante.

Quelles sont les fonctions de BFC :

1. Disposition adaptative à deux colonnes

2. Peut empêcher les éléments d'être recouverts par des éléments flottants

. 🎜>

3. Peut contenir des éléments flottants - effacer les flotteurs internes

4. Peut empêcher le chevauchement des marges lorsqu'ils appartiennent à différents BFC

Fonction BFC 1 : Disposition adaptative à deux colonnes.

C'est toujours le code ci-dessus. Pour le moment, la zone BFC ne chevauchera pas la boîte flottante, donc la largeur sera adaptative en fonction de la largeur du bloc conteneur (parent p) et du largeur de côté.

BFC et mise en page

IE, en tant que navigateur étrange, ne peut bien sûr pas prendre en charge la norme BFC étape par étape, il existe donc une mise en page dans IE. Mise en page et BFC Fondamentalement équivalent, afin de gérer la compatibilité IE, lorsque nous devons déclencher BFC, en plus d'utiliser les propriétés CSS dans la condition de déclenchement pour déclencher BFC, nous devons également cibler IE Le navigateur utilise zoom : 1 pour déclencher la mise en page du navigateur IE.

.parent {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
.child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }

Fonction BFC 3 : peut contenir des éléments flottants - effacer les flottants internes

Ajouter un débordement : caché au parent parent ;
Principe d'effacement des flottants : Déclenchez l'attribut BFC du parent p pour que l'enfant suivant p soit dans la même zone BFC du parent p. À ce moment, le flotteur a été effacé avec succès

Vous pouvez également flotter dans la même direction. atteindre l'objectif d'effacer le flotteur. Le principe du flottement est que les deux p sont situés dans la même zone BFC flottante

Fonction BFC 4 : Empêcher le chevauchement des marges :

Lorsque deux blocs adjacents Lorsque des sous-éléments appartiennent à des BFC différents, vous pouvez empêcher le chevauchement des marges

Comment faire : Enveloppez un p avec un p, puis déclenchez le BFC du p externe pour empêcher les marges des deux p de chevauchement

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {
            margin-bottom: 100px;//margin属性            
            width: 100px;            
            height: 150px;            
            background: #f66;
        }
        .main {
            margin-top: 100px;//margin属性            
            height: 200px;            
            background: #fcc;
        }
         .text{            
         /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/            
         overflow: hidden;//此时已经触发了BFC属性。
        }

Recommandations associées :

Comment créer un contexte de formatage au niveau du bloc ? Le rôle du contexte de formatage au niveau du bloc

Quels sont les types de contexte de formatage (FC) dans la mise en page CSS ? Introduction aux types de contexte de formatage (FC)

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!