1. Définition de BFC

BFC (Block Formatting Context), c'est-à-dire le contexte de formatage au niveau du bloc , il s'agit d'une zone de rendu dans la page et possède son propre ensemble de règles de rendu,

1. Les cases intérieures seront placées les unes après les autres dans le sens vertical
2. Pour un même BFC, les marges de deux cases adjacentes se chevaucheront, quelle que soit la direction.
3. La marge gauche de chaque élément touche la bordure gauche du bloc contenant (de gauche à droite), même pour les éléments flottants
4. La zone du BFC ne chevauche pas la zone de l'élément de le flotteur
5. Lors du calcul de la hauteur du BFC, les éléments enfants flottants participent également au calcul
6. BFC est un conteneur isolé et indépendant sur la page, et les éléments enfants à l'intérieur du conteneur n'affecteront pas les éléments à l'extérieur, et vice versa

BFCLe but est de former un espace complètement indépendant du monde extérieur, de sorte que les éléments enfants internes n'affectent pas les éléments externes

Au stade de la mise en page, la mise en page est souvent confuse en raison de problèmes BFC, tels que le problème de fusion des marges, la hauteur des éléments est perdue et la mise en page à deux colonnes ne permet pas l'auto-adaptation.

2. Conditions pour déclencher BFC

1. Élément racine, c'est-à-dire élément HTML
2. Élément flottant : la valeur flottante est à gauche, à droite
3. La valeur de débordement n'est pas visible, elle est automatique, défilement, masquée
4. La valeur d'affichage est toutes les valeurs sauf aucune, en ligne- block, inltable-cell, table-caption, table, inline-table, flex, inline-flex, grid, inline-grid 5. La
valeur de position est absolue ou fixe

3. Problème de fusion de marge

1. Fusion des marges au niveau du frère
       Raisons de la fusion : Définissez une marge inférieure pour les éléments frères et définissez une marge supérieure en même temps, ce qui entraîne une fusion des marges et des
       solutions de fusion :
           1. Définissez uniquement des marges pour l'un des éléments frères
           2. Définir la marge inférieure Activez BFC pour la marge extérieure
               1.display:inline-blick/flex
               2.position:absolute/fixed
               3.float:left
           3. Définissez un élément parent pour l'élément frère supérieur et activez
               le débordement BFC caché/auto pour l'élément parent
2. Marge extérieure au niveau parent-enfant La raison de la fusion et de la fusion : définissez une solution de fusion de
marge        dans la même direction pour les éléments parent et enfant en même temps Solution :            1. Définissez l'attribut padding pour l'élément parent            2 Définir la bordure border pour l'élément parent

4. Scénarios d'application de BFC

1. Évitez les marges qui se chevauchent

Lorsque la boîte sœur est définie et qu'une marge inférieure est définie pour l'élément frère et qu'une marge supérieure est définie en même temps, une fusion de marge se produit

        <style>
            div:first-child {
                width: 100px;
                height: 100px;
                background: red;
                margin-bottom: 10px;
            }
            div:last-child {
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 20px;
            }
        </style>
        
        <div class="cube"></div>
        <div class="cube"></div>

Il y a un problème de chevauchement des marges. A l'origine, la hauteur du corps devait être de 230 (la hauteur de la première case est de 100 + la marge de la première case est de 20 + la hauteur de la deuxième case est de 100 + la marge de la deuxième case est 10), qui doit être résolu en ce moment Pour ce genre de problème, vous devez ouvrir BFC

Lors de l'ouverture du BFC pour la deuxième boîte div,

            div:last-child {
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 20px;
                display: inline-block;
                /* position: absolute; */
                /* float: left; */
            }

La situation suivante se produira. L'utilisation de ces trois méthodes pour ouvrir BFC ajoutera de nouveaux styles et bordures . À ce stade, la hauteur du corps est de 234 pixels, ce qui n'est pas recommandé.

Meilleure méthode : lorsque nous donnons à la première boîte une boîte parent et déclenchons la boîte parent pour générer un BFC, alors les deux divs n'appartiennent pas au même BFC, et il n'y aura pas de problème de chevauchement de marge.

         <style>
            .cube {
                width: 100px;
                height: 100px;
                background-color: red;
                margin-bottom: 10px;
            }
            .cube1:last-child {
                width: 100px;
                height: 100px;
                background-color: red;
                margin-top: 20px;
            }
            .container {
                /* 开启bfc属性  */
                overflow: hidden;
            }
        </style>

        <div class="container">
            <div class="cube"></div>
        </div>
        <div class="cube1"></div>

，

2. Flottant clair

        <style>
            .parent {
                border: 10px solid red;
            }
            .child {
                width: 100px;
                height: 100px;
                background-color: blue;
                /* 浮动效果 */
                float: left;
            }
        </style>

        <div class="parent">
            <div class="child"></div>
        </div>

L'effet est le suivant, lorsque la hauteur de l'élément parent parent est calculée, la hauteur de l'élément enfant child n'est pas calculée.

Lorsque nous générons un BFC pour l'élément parent, l'élément parent calcule également la hauteur de l'élément enfant flottant lorsqu'il calcule la hauteur

            .parent {
                border: 10px solid red;
                /* 开启bfc overflow hidden auto */
                overflow: hidden;
            }

L'effet de la page est le suivant, affichage normal

Mais lorsque nous utilisons d'autres méthodes pour générer BFC, le style change et ne répond pas aux exigences. L'effet est le suivant

3. Implémentez une mise en page à deux colonnes

Définissez la largeur à gauche, adaptative à droite et activez BFC à droite

	<style>
		.left{
			width: 300px;
			background-color: red;
			float: left;
		}
		.right{
			background-color: blue;
			/* 开启bfc */
			overflow: hidden;
		}
	</style>
    
    <div class="left">左侧定宽</div>
	<div class="right">右侧自适应右侧自适应右侧自适应右侧自适应
		右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
		右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
		右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应
	</div>

Une mise en page à deux colonnes est implémentée et le côté droit est adaptatif

4. Implémentez une mise en page à trois colonnes

Idée: fixez la largeur sur les côtés gauche et droit, donnez à la boîte gauche float:left; donnez à la boîte droite float:right, et activez BFC pour la boîte du milieu, afin de réaliser la largeur fixe gauche et droite, et le effet d'auto-adaptation au milieu

        <style>
            /* 三列布局 左侧右侧定宽 中间自适应 */
            .left,
            .right {
                width: 100px;
                height: 50px;
                background-color: red;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .center {
                height: 100px;
                background-color: blue;
                /* 开启bfc */
                overflow: hidden;
            }
        </style>
            
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>

Intervieweur : Parlez de votre compréhension de BFC et du problème de la fusion des marges