BFC到底是什么东西 BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”。 W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视。..

一、BFC详解

1.1 BFC到底是什么东西

BFC
全称：
Block Formatting Context
， 名为 “块级格式化上下文”。

W3C
官方解释为：
BFC
它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，
提供了一个环境，
HTML
在这个环境中按照一定的规则进行布局。
简单来说就是，
BFC
是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用
BFC
呢，
BFC
可以看做是一个
CSS
元素属性

1.2 怎样触发BFC

这里简单列举几个触发
BFC
使用的
CSS
属性

1
overflow: hidden 
1
display: inline-block 
1
position: absolute 
1
position: fixed 
1
display: table-cell 
1
display: flex

1.3 BFC的规则

BFC
就是一个块级元素，块级元素会在垂直方向一个接一个的排列

BFC
就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定， 属于同一个
BFC
的两个相邻的标签外边距会发生重叠
计算
BFC
的高度时，浮动元素也参与计算

1.4 BFC解决了什么问题

1.使用Float脱离文档流，高度塌陷
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  <!DOCTYPE html>
<html lang="en">
<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>高度塌陷</title>
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

效果：
Test
可以看到上面效果给
box
设置完
float
结果脱离文档流，使
container
高度没有被撑开，从而背景颜色没有颜色出来，解决此问题可以给
触发
BFC
，上面我们所说到的触发
BFC
属性都可以设置。
修改代码

    }

1
display: inline-block;
    }

1
2
3
4
5
6
7
8
  
效果： 
##### 2.Margin边距重叠
 
    <title>Document</title>
            margin: 10px;
        }

效果：
可以看到上面我们为两个盒子的
margin
外边距设置的是
10px
，可结果显示两个盒子之间只有
的距离，这就导致了
塌陷问题，这时
边距的结果为最大值，而不是合，为了解决此题以使用
BFC
规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响），或者简单粗暴方法一个设置
，一个设置
padding
。
修改代码

1
<title>Margin边距重叠</title>
    }

1
<p><div class="box"></div></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  
效果： 
##### 3.两栏布局
 
    <title>两栏布局</title>
            div {
                 width: 200px;
                 border: 1px solid red;
            }

    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    <div style="width: 300px;">

效果：
可以看到上面元素，第二个
div
元素为
300px
宽度，但是被第一个
div
元素设置
Float
脱离文档流给覆盖上去了，解决此方法我们可以把第二个
div
元素设置为一个
BFC
。
修改代码

1
div {
        }

1
<div style="width: 300px;display:flex;">

效果： 
#### 1.5 结语
谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎各位指正。 
https://blog.csdn.net/weixin_43213962/article/details/105959869

https://blog.csdn.net/sinat_36422236/article/details/88763187

本文标题： 面试官-请说说什么是BFC-大白话讲清楚

发布时间： 2022年02月05日 00:00

最后更新： 2025年12月30日 08:54

原始链接： https://haoxiang.eu.org/8f5a9141/

版权声明： 本文著作权归作者所有，均采用CC BY-NC-SA 4.0许可协议，转载请注明出处！

赏
× 喜欢就赞赏一下呗！
打赏二维码