search
HomeWeb Front-endCSS TutorialWhat is BFC? Learn more about BFC and talk about its role

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
Using Pages CMS for Static Site Content ManagementUsing Pages CMS for Static Site Content ManagementMay 13, 2025 am 09:24 AM

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole &

The Ultimate Guide to Linking CSS Files in HTMLThe Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewCSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesHow to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricks@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool