What 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.
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:
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:
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:
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
<!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>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
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?
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
作用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>
很多网上博主说，通过给container设置一个BFC，内部的浮动元素就会向其汇报高度，然后container就能解决浮动高度塌陷问题，这个做法是正确的，但是这个说法其实是错误，并不是因为其内部的浮动元素向其汇报了高度
事实上，想通过BFC解决高度塌陷问题需要满足两个条件：
浮动元素的父元素触发BFC，形成独立的块级格式化上下文(BFC)
浮动元素的父元素高度为auto
首先我们先看一段W3C的描述
大致意思为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>
（学习视频分享：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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1666
14
1426
52
1328
25
1273
29
1254
24
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
