前言
我们经常被问到什么是BFC，总有一种知其然不知其所以然的感觉，一时不知道怎么回答。
今天我们就说说BFC到底是什么???
定义
BFC 全称 Block formatting context, 即是块级格式上下文
官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。
是不是有点理解
我们可以简单的理解为，它就是一个独立的空间，将子元素与外界隔离，防止影响到外部的其他元素
触发条件
-
根元素 html默认就是一个BFC
-
float的值不为none单纯的div不是BFC，如果添加了浮动就是BFC
-
overflow的值不为visible 单纯的div不是BFC，如果添加了overflow：hidden等就是BFC
-
display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex
-
position的值为absolute或fixed
可以解决哪些问题
问题1：包含塌陷问题
当给子元素box设置margin-top时，会看到如下效果：父元素和子元素一起距离顶部80px
<!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>
.container{
background: yellowgreen;
}
.box {
width: 100px;
height: 100px;
background: #000;
margin-top: 80px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
效果图
这不是我们要的效果
我们想要的是，box与父级container的距离80px, 父级的位置不变
解决
这时候给父级设置 display: inline-block, 让其成为BFC
.container{
background: yellowgreen;
display: inline-block;
}
效果图
问题2：外边距的塌陷问题（垂直塌陷）
当给上下两个div设置margin时，会看下如下效果：div之间的间距不是，margin值的叠加，而是重合，取最大值
<!--
* @Descripttion:
* @version:
* @Author: Ybb
* @Date: 2022-10-25 13:47:59
* @LastEditors: Andy
* @LastEditTime: 2022-11-23 10:29:53
-->
<!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 {
width: 100px;
height: 100px;
background: #000;
margin: 80px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
效果图
这不是我们要的效果
我们想要的是，两个box之间间距应该160px
解决
给其中一个div添加inline-block，让其变成BFC
<body>
<div class="box"></div>
<div class="box" style="display:inline-block"></div>
</body>
效果图
问题3：清除浮动
当给子元素设置浮动后，父元素无法被撑开
<!--
* @Descripttion:
* @version:
* @Author: Ybb
* @Date: 2022-10-25 13:47:59
* @LastEditors: Andy
* @LastEditTime: 2022-11-23 10:41:04
-->
<!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>
.container{
background: yellowgreen;
}
.box {
width: 100px;
height: 100px;
background: #000;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
效果图
解决
给父级设置BFC，可以清除浮动，这时候就可以看见父级了
.container{
background: yellowgreen;
display: flex;
}
效果图
总结
- 一个BFC区域只包含其子元素，不包括其子元素的子元素
- 并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域
- 不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响.
