一、对BFC的了解
Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则
（可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）
二、如何触发BFC
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素；
- 浮动元素：float 不为none的属性值；
- 绝对定位元素：position (absolute、fixed)
- display为： inline-block、table-cell、flex
- overflow 除了visible以外的值 (hidden、auto、scroll)
三、BFC的布局规则
内部的盒子会在垂直方向，一个个地放置；
- BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ；
- 计算BFC的高度时，浮动元素也参与计算
- 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
- BFC的区域不会与float重叠；
BFC的应用
1、解决margin重叠问题
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
.container {
background-color: red;
overflow: hidden;
width:200px;
}
p {
margin: 10px 0;
background-color: lightgreen;
width:200px;
}
.newBFC {
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<p> 1</p>
<p> 2</p>
<div class="newBFC">
<p> 3</p>
</div>
</div>
</body
</html>
运行结果 
解析：1和2margin重叠了；为了让3不跟1，2一样只用在3上面加一个overflow: hidden。
2、解决浮动高度塌陷问题
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BFC浮动问题</title>
<style>
.one {
/* 文档流 里面的文字标签将父元素撑起来 */
background-color: pink;
background-color: pink;
overflow: hidden;
}
.two {
float: left;
}
</style>
</head>
<body>
<!-- 文档流 从上到下,当遇到float、position：absolute时，会离开文档流 -->
<div class="one">
<div class="two">Hello World!</div>
</div>
你好世界！
</body>
</html>
运行结果：
解析：第一幅图是浮动塌陷了，为了解决这个问题只用在.one标签上加上overflow: hidden;
三、解决侵占浮动元素的问题
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
.dsj{height: 100px;
width: 100px;
float: left;
background: #ff0}
.jfj{
width: 200px;
height: 200px;
background: #eee;
overflow:hidden;
}
</style>
<body>
<div class="dsj">1</div>
<div class="jfj">2</div>
</body>
</html>
运行结果：
解析：左边第一幅图是被浮动元素侵占，为了解决这个问题只用在.jfj标签上加上overflow: hidden就可以;
总结：以上就是关于BFC的一些分析，BFC 是一种概念，是对前端布局技术的一种理论上的总结，掌握它可以让我们在使用CSS +DIV进行布局时，知道一些特殊操作以及规避问题的原理。BFC的概念比较抽象，但通过实例分析，有助于我们对BFC的理解。
在此仅列举了几个例子，欢迎大家一起探索更多^_^
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。