什么是BFC?
块格式化上下文（Block Formatting Context， BFC）是一块独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
通俗讲就是，BFC中的内部元素无论如何布局，都会在边界里面，不会影响外部区域。
常见的创建BFC的方式
- 浮动元素（
float不为none） - 绝对定位的元素（
position为absolute或者fixed） -
overflow不为visible的块级元素 -
display值为flex、flow-root、inline-block、table-cell等
常见应用场景
1. 清除浮动
浮动元素由于不占据文档流位置，故无法撑开父容器高度，会影响整体界面的布局。如下：
.parent{
border: 1px solid green;
}
.child{
float: left;
width: 100px;
height:100px;
border: 1px solid red;
}
<div class='parent'>
<p>父容器</p>
<div class='child'>子容器</div>
</div>
浮动影响外部容器高度.png
为了清除浮动带来的影响，可为
parent元素创建一个BFC，来包含浮动元素，使其不影响外部的布局。则为
parent设置overflow属性即可，使其overflow不为visible。或者也可以设置
display:flow-root属性，该属性可以创建一个无副作用的BFC。
设置overflow:hidden或者display:flow-root的布局.png
2. 外边距合并问题
垂直方向的两个相邻元素的外边距会发生叠加，叠加后的外边距为两者中外边距的最大值。
这样设计的意义：保持各个块之间上下间距的距离一致性，比如多个段落之间与顶部底部的边距保持一致。
比如：
.topText{
margin: 20px 0;
border: 1px solid #ccc;
width: 100px;
}
.btmText{
margin: 20px 0;
border:1px solid red;
width: 100px;
}
<p class='topText'>上方文本</p>
<p class='btmText'>下方文本</p>
外边距合并.png
如果想让上下的外边距都保留，互不影响，则需要创建一个BFC。
可以给某一p标签设置一个父容器，给该父容器创建一个BFC。这样里面的p元素就不会影响到外面的元素。
.parent{
overflow: hidden;
}
<p class='topText'>上方文本</p>
<div class="parent">
<p class='btmText'>下方文本</p>
</div>
创建BFC后的布局.png
总结
BFC可以看成一个与外界隔离的容器，他会包裹住内部元素，不会影响到外界。
