À propos du formatage au niveau du bloc en CSS

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 les 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é lorsqu'une des conditions suivantes est remplie, se transformant en BFC

L'élément racine

l'attribut float n'est pas nul

la position

n'est pas statique et relative

le débordement

n'est pas visibleaffichage pour inline-block, table-cell, table-caption, flex, inline-flex

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

3.Règles de disposition 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 dans le sens vertical.

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

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 un formatage de gauche à droite , sinon c'est le contraire). 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 du BFC, les éléments flottants participent également au calcul

4 Fonction du BFC :

Utilisez-le pour venir boby

1. . Empêcher

Marges

chevauchement bfc provoque le chevauchement des marges des éléments enfants appartenant au même bfc (la distance dans la direction verticale de la Box est déterminée par la marge. Les marges de deux Les boîtes adjacentes appartenant au même BFC se chevaucheront)

Problème : Comme vous pouvez le voir sur l'image, il n'y a qu'une marge de 20 px entre String1 et String2. Logiquement parlant, elle devrait être de 40 px, mais cela provoque leur. les marges se chevauchent dans bfc

Code :

Solution : Nous pouvons envelopper un conteneur à l'extérieur du div et déclencher le conteneur pour générer un BFC. Ensuite, les deux div n’appartiennent pas au même BFC et aucun chevauchement de marge ne se produira.

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

Code :

2.

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

Effacer le flotteur

:Problème : Lorsque l'élément est un élément enfant Une fois qu'ils flottent tous, il y aura un phénomène d'effondrement en hauteur, c'est-à-dire que la hauteur du conteneur parent ne sera pas étirée

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><div class="pre2">
        <div class="float1"></div>
        <div class="float2"></div></div>

Règles Bfc : Lors du calcul de la hauteur de BFC, les éléments flottants participent également au calcul, donc tant que le conteneur parent est défini sur bfc, les éléments enfants peuvent être inclus :

Ce conteneur contiendra des éléments enfants flottants, dont la hauteur de l'élément sera étendue pour inclure ses éléments enfants, et dans ce BFC, ces éléments retomberont 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 n'est pas déplacé , Mais il apparaît sous 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><div class="container2">
        <div class="box"></div>
        <p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd  fsdsdfsdf fffffff</p></div>

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

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des choses plus excitantes, s'il vous plaît. faites attention à php Autres articles connexes sur le site chinois !

Lecture connexe :

Quels sont les attributs couramment utilisés pour diviser les cadres et les fenêtres en HTML ?

Quels sont les références au CSS en HTML ?

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!