前言：
在前端的基础中，CSS的BFC是一个重要的概念，也是很多大厂考察前端基础比问的一个问题，很多时候我们都是知道这个概念，但是具体是什么作用，下面请大家耐着性子看完这篇文章相信会有一些收获的。
在开始之前 我们先带着几个问题出发。
什么是BFC？触发BFC的条件是什么BFC能干什么？什么场景需要使用BFC
什么是BFC？
BFC的全称为块格式化上下文（Block Formatting Context，BFC）
在MDN中详细的说明了BFC是Web页面中可视CSS渲染的一部分，是块盒子布局过程中发生区域，也是浮动元素与其他元素的交互区域。
是不是有些不懂？文档是写的比较官方。但是我们完全可以理解为所谓的BFC就是CSS布局的一个概念，是一个区域换句话说可以理解为一个黑盒子。BFC的内部元素布局与外部互不影响，通过一些条件来触发BFC，从而实现布局上的需求或者解决一些问题。
触发BFC的条件是什么?
说到触发的条件就不得不说道现在的文档流的模式，目前分为三大类：
普通流
其中普通流很好理解就是页面从上到下，从左到右进行排列展示，如果在块级格式化上下文中，他们是竖着排列的，反之在行内格式化上下文里面，他们是横着排列的。
浮动流
左浮动的元素尽量靠左、靠上，反之右浮动同理。
定位流
使用绝对定位和浮动定位的话都会脱离文档流，但是不会影响常规流的布局，同样也不会进行文档流占位。
触发的条件：
- 根元素（<html>）
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- overflow 计算值(Computed)不为 visible 的块元素
- display 值为 flow-root 的元素
- 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- ....
详情：MDN巴拉巴拉一大推。最好把加粗的记住比较合适。
触发的作用：
属于同一个BFC的两个相邻的容器上下的margin会重叠。且会取间距最大的值。(敲黑板，是不是面试中遇到过？)
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin-bottom: 10px;
}
.box1{
width: 100px;
height: 100px;
background: blue;
margin-top: 60px;
}
.box1-1{
/*overflow: hidden;*/
/*display:flow-root;*/
}
</style>
<body>
<div class="box"></div>
<div class="box1">
<div class="box1-1"></div>
</div>
<script>
</script>
</body>
</html>
原因：两个元素都属于HTML根元素，BFC的特性1规定 “属于同一个BFC的两个相邻容器的上下margin会重叠”。
计算BFC高度时浮动元素也参于计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<style>
.box {
height: 200px;
width: 200px;
background: #ccc;
float: left;
margin: 10px
}
.box1 {
height: 200px;
width: 200px;
background: #ccc;
}
.container {
background-color: red
}
</style>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
<script>
</script>
</body>
</html>
原因：当父元素没有设置高度的时候，子元素设置的float不等于none，就会引发BFC的特性、请看第二条、父元素的高度塌陷。
BFC的区域不会与浮动容器发生重叠
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<style>
.box {
height: 200px;
width: 200px;
background: #ccc;
float: left;
}
.box1 {
height: 200px;
background: #f7aeae;
}
.container {
}
</style>
<body>
<div class="container">
<div class="box"></div>
<div class="box1"></div>
</div>
<script>
</script>
</body>
</html>
原因：左侧元素浮动，脱离了文档流。
统一解决
可以采用MDN的flow-root属性，给父元素设置display: flow-root，一个新的 display 属性的值，它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。当然也要记得他的兼容
当然还有其他很多的方式，比如说overflow:hidden、display: inline-block 都可以达到清除浮动的效果，具体的实现还需要根据业务进行甄别
总结
BFC是格式化上下文的一个黑盒子是CSS布局中的一个概念方法，触发BFC有很多的方式 它可以解决：margin相互重叠、浮动高度塌陷、浮动元素重叠等问题，在日常的开发中可谓必不可少。
你学废了吗？
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。