Qu'est-ce que BFC ? Apprenez-en davantage sur BFC et parlez de son rôle-tutoriel CSS-php.cn

Qu'est-ce que BFC ? L'article suivant vous amènera à comprendre BFC et à parler du rôle de BFC. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Qu'est-ce que BFC ? Apprenez-en davantage sur BFC et parlez de son rôle

Lorsque j'interviewais Byte, l'intervieweur m'a demandé si je connaissais BFC. En fait, j'avais lu beaucoup d'articles à l'époque, mais je ne m'en souvenais pas. chose, puis j'ai interviewé, je n'y ai pas répondu à ce moment-là, mais après avoir écouté l'explication du professeur Wang Hongyuan, je me suis senti éclairé, alors j'ai voulu la partager avec tout le monde. Le contenu suivant est basé sur le résumé du cours sur le système frontal du professeur Wang Hongyuan. Je pense qu'il est très clair. Merci beaucoup, professeur Wang Hongyuan

Avant de comprendre BFC (Contexte de formatage de bloc), jetons un coup d'œil. sur FC(Contexte de formatage) :

Quest-ce que BFC ? Apprenez-en davantage sur BFC et parlez de son rôle

Ce passage provient du site officiel du W3C Nous pouvons obtenir les informations suivantes :

Toutes les cases appartiennent à un FC
La disposition du bloc. -les éléments de niveau appartiennent à un BFC. Par exemple, div/p/h1, etc. -> La disposition des éléments de niveau
inline dans la disposition BFC appartient à un IFC. Par exemple, img/a/span/i -> Dans la mise en page IFC, compréhension simple : la mise en page et le contexte où se trouvent les éléments au niveau du bloc sont BFC, et la mise en page et le contexte où se trouvent les éléments au niveau en ligne sont IFC

Question 1. Niveau bloc Les éléments sont tous disposés dans BFC, alors où est ce BFC ? Tout d'abord, jetons un œil à l'explication officielle du W3C :

D'après la situation compilée sur MDN, BFC seront créés :

Élément racine (html)

Quest-ce que BFC ? Apprenez-en davantage sur BFC et parlez de son rôle Éléments flottants (la valeur flottante de l'élément n'est pas nulle)

Éléments en position absolue (la position de l'élément est absolue ou fixe)

Cellules de tableau (élément L'affichage est table-cell, la cellule du tableau HTML est par défaut à cette valeur, titre du tableau (l'affichage de l'élément est table-caption, le titre du tableau HTML est par défaut à cette valeur) row, tbody, thead, tfoot attributs par défaut) ou inline-table)
Éléments de bloc dont la valeur calculée de débordement (calculée) n'est pas visible
Éléments flexibles (l'affichage est l'élément enfant direct des éléments flex ou inline-flex)
Éléments de grille (l'affichage est l'élément enfant direct des éléments flex ou inline-flex) enfant d'éléments de grille ou d'éléments de grille en ligne))
élément d'affichage avec valeur racine de flux
On peut le voir

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

Copier après la connexion

box1 et box2 dans ce code sont tous deux disposés dans le BFC de l'élément racine html

Tout d'abord, regardons la description du rôle du BFC dans le document officiel :

Les informations que nous pouvons obtenir :

Dans un BFC, le les boîtes partiront du haut du bloc contenant et seront les unes après les autres dans le sens vertical. Beaucoup de gens sont peut-être habitués à ce point de vue, mais c'est ce que BFC nous aide à réaliser. Lorsque nous définissons une marge supérieure pour une boîte, BFC nous aidera à l'analyser, puis donnera une marge supérieure lorsque la boîte est disposée Quest-ce que BFC ? Apprenez-en davantage sur BFC et parlez de son rôle

Dans un BFC, le bord gauche de chaque élément sera proche du contenant Le bord gauche du bloc

Fonction 1 : Utilisez BFC pour résoudre le problème de chevauchement des marges

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

Copier après la connexion

À ce stade, box1 et box1 sont tous deux dans le BFC du html, et box1 et box2 sont adjacents dans le sens vertical, il y aura donc un chevauchement de marge. Prenez-en deux. La plus grande valeur est 50px

Comment le résoudre ?

Beaucoup de gens peuvent penser à ajouter un BFC directement à box1, alors ajoutez directement un attribut overflow:hidden à box1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;

        overflow: hidden;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

Copier après la connexion

Quel est le résultat ? Quest-ce que BFC ? Apprenez-en davantage sur BFC et parlez de son rôle

J'ai trouvé que ça ne fonctionnait pas. Beaucoup de gens peuvent être confus à l'heure actuelle. Box1 a déjà formé un BFC, alors pourquoi se chevauche-t-il encore ? Laissez-moi vous expliquer. Tout d'abord, box1 a effectivement formé un BFC à ce moment-là (cela peut être compris comme un BFC formé à l'intérieur de box1), mais l'élément box1 lui-même appartient toujours au même BFC de html que box2, donc il un chevauchement des marges se produira toujours

Nous devons donc ajouter un calque à la boîte1, puis définir un BFC pour la boîte extérieure de la boîte1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 给box1外层增加一个container盒子，并设置BFC */
      .container {
        overflow: hidden;
      }
      .box1 {
        height: 200px;
        width: 400px;
        background-color: orange;

        margin-bottom: 30px;
      }
      .box2 {
        height: 150px;
        background-color: purple;

        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
    </div>
    <div></div>
  </body>
</html>

Copier après la connexion

À ce moment, la boîte1 appartient au BFC du conteneur et la boîte2 appartient au BFC de HTML, qui n'appartient pas au même BFC, il peut donc résoudre le problème de chevauchement des marges Quest-ce que BFC ? Apprenez-en davantage sur BFC et parlez de son rôle

作用2：解决浮动高度塌陷问题

当我们给container里面的四个item设置浮动的时候，很明显，这几个元素都会脱离文档流，此时container不会有高度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        background-color: orange;
      }

      .item {
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        border: 1px solid #000;
        float: left;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Copier après la connexion

Quest-ce que BFC ? Apprenez-en davantage sur BFC et parlez de son rôle

很多网上博主说，通过给container设置一个BFC，内部的浮动元素就会向其汇报高度，然后container就能解决浮动高度塌陷问题，这个做法是正确的，但是这个说法其实是错误，并不是因为其内部的浮动元素向其汇报了高度

事实上，想通过BFC解决高度塌陷问题需要满足两个条件：

浮动元素的父元素触发BFC，形成独立的块级格式化上下文(BFC)
浮动元素的父元素高度为auto

首先我们先看一段W3C的描述

Quest-ce que BFC ? Apprenez-en davantage sur BFC et parlez de son rôle

大致意思为BFC的高度是auto情况下，高度是这样计算：

如果只有inline-level，是行高的顶部和底部的距离
如果有block-level，是有最底层的块上边缘和最底层块盒子的下边缘之间的距离（有margin也会计算在内）
如果有绝对定位元素，将被忽略（所有我们无法通过BFC解决绝对定位的高度塌陷问题）
如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘（这才是BFC能解决浮动元素塌陷问题的原因，并不是因为浮动元素向上汇报了高度）

所以我们直接给container通过添加overflow属性设置BFC，则由于上述第四条4特性，container会增加高度来包括内部四个item浮动元素下边缘，所以解决了浮动塌陷问题

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        background-color: orange;
        /* 通过overflow形成BFC */
        overflow: hidden;
      }

      .item {
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        border: 1px solid #000;
        float: left;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Copier après la connexion

Quest-ce que BFC ? Apprenez-en davantage sur BFC et parlez de son rôle