What is BFC? Learn more about BFC and talk about its role-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What is BFC? Learn more about BFC and talk about its role

青灯夜游

Jul 08, 2022 am 11:29 AM

cssbfc

What is BFC? The following article will take you to understand BFC and talk about the role of BFC. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

What is BFC? Learn more about BFC and talk about its role

When I was interviewing Byte, the interviewer asked me if I knew anything about BFC. I actually read a lot of articles at the time, but I couldn’t remember them. , I feel that every article talks about the same thing, and I didn’t answer it during the interview. But after listening to teacher Wang Hongyuan’s explanation, I felt enlightened, so I wanted to share it with everyone. The following content is based on the summary of teacher Wang Hongyuan’s front-end system class. I think it is very clear. Thank you very much to teacher Wang Hongyuan

Before understanding BFC(Block Formatting Context), Let’s first take a look at what FC(Formatting Context) is:

What is BFC? Learn more about BFC and talk about its role

This passage comes from the W3C official website. We can get the following information:

All boxes belong to a FC
The layout of block-level elements belongs to a BFC. For example, div/p/h1, etc. -> The layout of the
inline-level elements in the BFC layout belongs to an IFC. For example, img/a/span/i -> In the IFC layout,

is simple to understand: the layout and context where block-level elements are located is BFC, and the layout and context where inline-level elements are located is IFC.

Question 1. Block-level elements are all laid out in BFC, so where is this BFC?

First, let’s take a look at the official explanation of W3C:

What is BFC? Learn more about BFC and talk about its role

According to the situation compiled on MDN, BFC will be created:

Root element (html)
Floating element (element's The float value is not none)
Absolutely positioned elements (the element's position is absolute or fixed)
Inline block elements (the element's display is inline-block)
Table cells (The element's display is table-cell, HTML table cell defaults to this value, table title (the element's display is table-caption, HTML table title defaults to this value) row, tbody, thead, tfoot default attributes) or inline -table)
Overflow calculated value (Computed) is not visible block element
Flexible element (display is a direct child element of the flex or inline-flex element)
网Grid element (display is a direct child element of the grid or inline-grid element)
The element whose display value is flow-root

It can be seen that

<!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>

this Box1 and box2 in the code are both laid out in the BFC of the html root element

Question 2. The role of BFC

First take a look at the official documentation on BFC Description of the function:

What is BFC? Learn more about BFC and talk about its role

The information we can get:

In a BFC, the box will start from the top of the containing block , will be placed one next to another in the vertical direction. Many people may be accustomed to this, but this is what BFC helps us achieve. When we set a margin-top for a box, BFC will help us parse it, and then give a top margin during the box layout
In a BFC, each element The left edge of will be close to the left edge of the containing block
In the same BFC, in the vertical direction, the margins of two adjacent boxes will overlap, and the value is The larger of the two (you can use this feature to solve the margin overlap problem)

Function 1: Use BFC to solve the margin overlap problem

nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <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>
  
  
    <div></div>
    <div></div>

At this time, box1 and box1 are both in the BFC of html, and box1 and box2 are adjacent in the vertical direction, so there will be margin overlap. Take the larger value of the two, 50px

What is BFC? Learn more about BFC and talk about its role

How to solve it? Many people may think of adding a BFC directly to box1, so directly add an overflow:hidden attribute to 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>

What is the result?

What is BFC? Learn more about BFC and talk about its role

Found that it doesn’t work. Many people may be confused at this time. Box1 has already formed a BFC, so why does it still overlap? Let me explain to you. First of all, box1 has indeed formed a BFC at this time (it can be understood as a BFC formed inside box1), but the element box1 itself still belongs to the same BFC of html as box2, so it will still Margin overlap occurs

So we need to add a layer to box1, and then set the BFC for the outer box of 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外层增加一个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>

At this time, box1 belongs to the BFC of the container, and box2 belongs to the BFC of the html. No Belong to the same BFC, so the margin overlap problem can be solved

What is BFC? Learn more about BFC and talk about its role

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

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

nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <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>
  
  
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

What is BFC? Learn more about BFC and talk about its role

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

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

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

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

What is BFC? Learn more about BFC and talk about its role

大致意思为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>

What is BFC? Learn more about BFC and talk about its role

（学习视频分享：web前端入门）

The above is the detailed content of What is BFC? Learn more about BFC and talk about its role. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete