引言
在前端面试中，BFC是一个很经常问到的概念。今天我们就来一起了解下什么是BFC，以及它的主要作用。在学习BFC之前，我们先来看看什么是高度塌陷：
高度塌陷
在文档流中，父元素的高度默认是被子元素撑开的，子元素多高，父元素就会被撑开多高。但是当子元素设置为浮动（float:left/right）以后，子元素就会脱离文档流，这就导致子元素无法撑起父元素的高度，产生了高度塌陷。下面我们用一个案例演示一下。
我们首先创建一个html页面，里面添加3个div容器
<!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>Document</title>
<style>
.box1 {
border: 10px solid red;
}
.box2 {
width: 100px;
height: 300px;
background-color: orange;
}
.box3 {
width: 300px;
height: 300px;
background-color: orchid;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>将看到如下效果：
然后我们给box2添加一个浮动属性
<style>
.box1 {
border: 10px solid red;
}
.box2 {
width: 100px;
height: 300px;
background-color: orange;
float:left;
}
.box3 {
width: 300px;
height: 300px;
background-color: orchid;
}
</style>效果是这样的：
我们可以很清晰的看到由于box2设置了向左浮动，所以脱离了文档流，也就导致了box2之外的box1容器感知不到box2的存在，因此高度变成了0。高度塌陷以后，下面的元素必然会向上拱，这样就让布局非常混乱。那么如何解决这个问题呢？
方法一: 给父元素设定一个固定高度
这种方式不利于后期维护（子元素高度随时会变），因此不可取
- 方法二：开启父元素的BFC
什么是BFC
根据W3C的标准，BFC（Block Formatting Context）叫块级格式化上下文，BFC是CSS中隐
含的属性，该属性可以设置打开或者关闭，默认是关闭的，当我们为一个元素开启BFC后，
该元素会变成一个独立的布局区域。总之BFC的目的就是：形成一个完全独立的空间，让空
间里的子元素不会影响到外面的布局，并且触发了BFC的容器具有普通容器所没有的一些特
性。
BFC的特性
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素可以包含浮动的子元素
开启BFC的方法
将元素的overflow设置为非visible（即overflow:hidden/scroll/auto）
推荐将overflow属性设置为auto。
使用
display: flow-rootdisplay:flow-root可以将元素转换为块元素并开启BFC，但是存在兼容性问题,不兼容IE。
设置元素的浮动（float）值不为none（即：left/right之一）
不推荐，会导致元素宽度丢失。
将元素设置为行内块元素（display：inline-block）
不推荐，同样会导致元素宽度丢失。
设置元素绝对定位(position:absolute;fixed)
不推荐，同样会导致元素宽度丢失。
- 特定布局方式 (display: inline-block/flex/table-cells)
BFC验证
开启BFC能够解决高度塌陷问题的验证很简单，只需要增加以上列举的开启BFC方法中任意一个，我们以设置overflow:auto 为例。
<style>
.box1 {
border: 10px solid red;
overflow: auto;
}
.box2 {
width: 100px;
height: 300px;
background-color: orange;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: orchid;
}
</style>刷新网页，可以看到高度塌陷的问题已经被解决：
总结
BFC是前端工程师需要掌握的一个基本概念，希望大家可以掌握处理高度塌陷的多种方法，这样我们才能够在工作中灵活处理遇到的问题。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。