BFC(边距重叠解决方案)
1、BFC的基本概念：块级格式化上下文
2、BFC的原理（说白了就是BFC的渲染规则）：
这个规则是什么呢？我觉得大家能说出4点就够了
第一个就是BFC可以解决这个元素的垂直的边距发生重叠的情况 第二个是BFC的区域不会与浮动元素的box重叠，这个肯定是用来清除浮动的。 第三个是BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，反过来，里面的元素也不会影响到外面的元素。 第四个就是计算BFC高度的时候，浮动元素也会参与计算，现在比较抽象，等会通过代码演示
3、怎么创建BFC
刚才给父元素加了一个 overflow:hidden就创建了一个BFC，那么除了overflow:hidden，还有哪些写法能创建BFC呢？
第一个是float的值不为none，因为css的float值默认是none，只要设置了浮动就创建了BFC 第二个是position的值不是static或者relative，也就是创建了一个bfc，比如设置成absolute,fixed 第三个是display属性是inline-box或者table-cell，跟table相关的这几个，就创建了BFC 第四个是overflow,overflow为auto,hidden，都可以创建BFC
4、BFC的使用场景有哪些？
第一部分，解决边距的问题
<!--bfc垂直方向边距重叠-->
<section id="margin">
<style>
#margin{
background: pink;
overflow: hidden;
}
#margin>p{
margin: 5px auto 25px;
background: red;
}
</style>
<p>1</p>
<p>2</p>
<p>3</p>
</section>
父级元素是创建了bfc的，如图，我们发现上边距是5px，1和2和3之间的间隔是25px，因为1的下边距和2的上边距发生了重叠，重叠的时候根据取最大值的原则。如果我不想让它重叠，就给子元素增加一个父元素，给这个父元素创建一个bfc就能解决这个问题
<!--bfc垂直方向边距重叠-->
<section id="margin">
<style>
#margin{
background: pink;
overflow: hidden;
}
p{
margin: 5px auto 25px;
background: red;
}
</style>
<p>1</p>
<div style="overflow:hidden">
<p>2</p>
</div>
<p>3</p>
</section>
如图，这样我们发现1和2，2和3之间的间隔变大了，没有重叠
bfc的原理之一BFC可以解决这个元素的垂直的边距发生重叠的情况 && overflow为auto,hidden，可以创建BFC
第二部分，解决布局的问题
<!--跟布局相关的bfc-->
<section id="layout">
<style>
#layout{
background: red;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right{
height: 110px;
background: #ccc
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
如图，我们发现，灰色的部分高度增高的时候，下面的部分侵入了左侧的占位，这个是float的一个特性，当左侧没有float元素的时候，依然会往左侵染，显然，这不符合我们布局的目的，那么就需要给右侧的元素创建一个bfc,bfc的原理之一是bfc的元素不会与float元素相互重叠，现在是重叠的，那么创建bfc以后就不会与float重叠了
<!--跟布局相关的bfc-->
<section id="layout">
<style>
#layout{
background: red;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right{
height: 110px;
background: #ccc;
overflow: auto;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
给right元素加一个overflow，创建一个bfc，如图，情况就变了，不会与左侧元素重叠
bfc的原理之一，BFC的区域不会与浮动元素的box重叠 && overflow为auto,hidden，可以创建BFC
第三部分，计算高度
<!--浮动元素-->
<section id="float">
<style>
#float{
background:red
}
#float .float{
float: left;
}
</style>
<div class="float">我是浮动元素</div>
</section>
如图，浮动元素的父元素高度为0，没有了背景色。这个就是子元素遇到浮动的时候，它的高度计算没有包含进来，如果当这个父元素设置为bfc的时候，子元素的高度也会参与到父元素的高度计算中来
<!--浮动元素-->
<section id="float">
<style>
#float{
background:red;
/* overflow: auto; */
float: left;
}
#float .float{
float: left;
}
</style>
<div class="float">我是浮动元素</div>
</section>
给父元素加个overflow或者float创建了bfc，那么就计算子元素高度，就算子元素是float，也会计算
bfc原理之一计算BFC高度的时候，浮动元素也会参与计算 && float的值不为none，设置了浮动就创建了BFC
原文地址：https://www.cnblogs.com/wzndkj/p/10134959.html