一、BFC概念
BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
二、触发
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
三、BFC的特性及应用
1.同一个BFC下外边距会发生重叠
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>BFC</title>
<style>
div{
width:100px;
height:100px;
background:#f0f;
margin:50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<body>
</html>运行结果如下图：
从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 50px，而不是 100px
使用BFC原理修改后的代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>BFC</title>
<style>
.box{
width:200px;
margin:0 auto;
overflow:hidden;
}
.btn{
width:100px;
height:100px;
background:#f0f;
margin:50px;
}
</style>
</head>
<body>
<div class="box">
<div class="btn"></div>
</div>
<div class="box">
<div class="btn"></div>
</div>
<body>
</html>这个时候，两个盒子之间的边距就是100px，运行结果如下图：
2.BFC 可以包含浮动的元素（清除浮动）
我们都知道，浮动的元素会脱离文档流，看例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>BFC</title>
<style>
.box{
width:300px;
margin:0 auto;
border:1px solid #000;
}
.float{
width:100px;
height:80px;
background:#f00;
float:left;
</style>
</head>
<body>
<div class="box">
<div class="float"></div>
</div>
<body>
</html>运行结果如下图：
由于浮动元素脱离文档流，所以容器只剩下了2px的高度，如果触发BFC，那么容器就会包裹浮动元素
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>BFC清除浮动的影响</title>
<style>
.box{
width:300px;
margin:0 auto;
border:1px solid #000;
overflow:hidden;
}
.float{
width:100px;
height:80px;
background:#f00;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="float"></div>
</div>
<body>
</html>运行结果如下图
3.BFC 可以阻止元素被浮动元素覆盖
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>BFC</title>
<style>
.box{
width:300px;
margin:0 auto;
border:1px solid #000;
overflow:hidden;
}
.float{
width:100px;
height:80px;
background:#f00;
float:left;
}
.right{
width:200px;
height:300px;
background:#f0f;
}
</style>
</head>
<body>
<div class="box">
<div class="float"></div>
<div class="right">我是一个没有浮动，没有触发BFC的元素.width:200px;
height:300px;
background:#f0f;</div>
</div>
<body>
</html>运行结果如下图：
这个时候，第一个浮动的元素已经覆盖了第二个元素，但是文本内容不会被覆盖，如果第二个元素触发BFC，即第二个元素添加overflow:hidden;就会变成
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。