CSS comprend le contexte de formatage au niveau du bloc BFC

1.Définition de BFC

BFC (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 participent uniquement des boîtes de niveau bloc (éléments de niveau bloc). Elle stipule comment la boîte interne de niveau bloc est disposée et n'a rien à voir avec l'extérieur de cette zone

En termes simples, il dit : L'élément qui a créé le BFC est une boîte indépendante. Les sous-éléments à l'intérieur n'affecteront pas la disposition des éléments extérieurs (cependant, la disposition à l'intérieur n'affectera pas l'extérieur), le BFC appartient toujours à l'ordinaire. flux dans le document

2. Génération de BFC :

Savoir déclencher BFC

BFC peut être déclenché et transformé en BFC si l'un des les conditions suivantes sont remplies

Élément racine
l'attribut float n'est aucun
la position n'est pas statique et relative
le débordement n'est pas visible
l'affichage est en ligne-bloc, table-cell, table-caption, flex , inline-flex

5. 
   

Vous constaterez que BFC est partout, vous ne le savez tout simplement pas lorsque vous l'utilisez

3. Règles de disposition du BFC :

Quelles sont les caractéristiques après transformation en BFC, comme suit :

Les Box internes seront placées les unes après les autres. un autre dans le sens vertical.
La distance verticale de Box est déterminée par la marge. Les marges de deux cases adjacentes appartenant au même BFC se chevaucheront
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 (par formatage de gauche à droite, sinon l'inverse). Cela est vrai même s'il y a du flotteur.
La zone BFC ne chevauchera pas la boîte flottante.
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.
Lors du calcul de la hauteur de BFC, les éléments flottants participent également au calcul

Fonction BFC :

Utilisez come boby

1. Empêchez le chevauchement de marge des sous-éléments dans le même bfc causé par

bfc (la distance dans la direction verticale de la Boîte Déterminée par la marge. Les marges de deux boîtes adjacentes appartenant au même BFC se chevaucheront)

Problème : Comme vous pouvez le voir sur l'image, il n'y a que 20px de marge entre String1 et String2, qui devrait être de 40px. logiquement , mais cela provoque un chevauchement de leurs marges dans bfc

Code :

<style>
.container1{
        /* 通过overflow：hidden可以创建bfc */
        overflow: hidden;
        background-color: red;
        width: 300px;
    }
    .sub1{
        margin: 20px 0px;
        background-color: #dea;
    }
</style>
<p class="container1">
        <p class="sub1">String1</p>
        <p class="sub1">String2</p>
</p>

Solution : nous pouvons enrouler un conteneur autour de p et déclencher le conteneur pour générer un BFC. Dans ce cas, les deux p n’appartiennent pas au même BFC et aucun chevauchement de marge ne se produira.

Code :

<style>
    .newbfc{
            overflow: hidden;
    }
</style>
<p class="container1">
        <p class="sub1">String1</p>
        <p class="newbfc"><p class="sub1">String2</p></p>
</p>

2. Flotteur transparent :

Problème : lorsque tous les éléments enfants d'un élément flottent, il y aura un phénomène d'effondrement de la hauteur, c'est-à-dire que la hauteur du conteneur parent ne sera pas étendue

Code :

Solution :

<style>
    .pre2{
        width: 200px;
        border: 2px solid red;
    }
    .float1,.float2{
        width: 100px;
        height: 100px;
        float: left;
    }
    .float1{
        background-color: #dee;
    }
    .float2{
        background-color: #dcc;
    }
</style>
<p class="pre2">
        <p class="float1"></p>
        <p class="float2"></p>
</p>

règles bfc : Lors du calcul de la hauteur de BFC, les éléments flottants participent également au calcul, donc tant comme le conteneur parent est défini sur bfc, vous pouvez Éléments enfants contenus :

Ce conteneur contiendra des éléments enfants flottants, et sa hauteur s'agrandira pour contenir ses éléments enfants, qui dans ce BFC reviendront dans le flux de documents régulier de la page .

3. Résoudre la mise en page : empêcher le retour à la ligne du texte

.pre2{
        width: 200px;
        border: 2px solid red;
        /* 设置overflow*/
        overflow:hidden;
    }

Code :

L'élément p ne bouge pas, mais il apparaît en dessous de l'élément flottant. Les zones de ligne (faisant référence aux lignes de texte) de l'élément p sont décalées. Ici, le rétrécissement horizontal des cases de ligne fournit de l'espace pour les éléments flottants.

<style>
.container2{
        overflow: hidden;
        width: 200px;
    }
    .box{
        float: left;
        width: 100px;
        height: 30px;
        background-color: #daa;
    }
</style>
<p class="container2">
        <p class="box"></p>
        <p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd  fsdsdfsdf fffffff</p>
</p>

Règles BFC : Le côté gauche de la zone de marge de chaque élément touche le côté gauche de la zone de bordure du bloc contenant (pour un formatage de gauche à droite, sinon l'inverse). Cela est vrai même s'il y a du flotteur.

Pour résoudre ce problème, ajoutez simplement overflow: Hidden à l'élément p pour en faire un nouveau bfc

Recommandations associées :

Explication détaillée du principe CSS BFC et de son application

Analyse des exemples d'utilisation de BFC et IFC en CSS

Dans CSS caché 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!