什么是BFC（Block Formatting Context ）
BFC（Block formatting context ）“块级格式上下文”。 是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。 可以理解为BFC是一个块独立的作用域，它有些自己的特性。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
如何产生BFC
满足下列条件之一就可以触发BFC
1.float 的值不是 none
2.position 的值不是static或者relative
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow 的值不是 visible
BFC的作用
1.解决margin塌陷问题 属于同一个BFC的两个相邻的box的margin会重叠，以大的为主。要想解决这个问题，可以将两个盒子分为不同的BFC中。 在同一个BFC中：
成为两个BFC，给其中一个盒子外面再包裹一层，并加上 overflow: hidden;
<style>
.red {
width: 100px;
height: 100px;
background-color: red;
margin: 20px;
}
.box {
overflow: hidden;
}
.yellow {
width: 100px;
height: 100px;
background-color: yellow;
margin: 20px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="box">
<div class="yellow"></div>
</div>
</body>
2.解决父元素高度塌陷问题
当子元素设置为浮动，父元素没有设置高度时，父元素无法撑开子元素的高度
给父元素设置 overflow: hidden;，触发BFC，就可以撑开高度
<style>
.box1 {
width: 200px;
border: 2px solid #ccc;
overflow: hidden;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
3.解决相邻div遮盖问题（可用作两栏布局） 两个相邻的div，其中一个浮动，另一个就会被覆盖
给被覆盖的元素加上 overflow: hidden;，触发BFC，就可以防止被红色盒子遮挡
<style>
.box1 {
height: 100px;
width: 100px;
float: left;
background: red
}
.box2 {
width: 200px;
height: 200px;
background: #eee;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1">我是一个左浮动的元素</div>
<div class="box2">我是一个没有设置浮动,也没有触发 BFC 的元素</div>
</body>
