BFC是什么
BFC全称是block formatting context，也就是块级格式化上下文。那么它是什么意思呢？又有什么用呢？我们可以把它理解为是一个与外界隔离的盒子，盒子里面不管怎么折腾都不会影响到外面的布局。利用这一特性可以解决一下经常遇到的问题。
什么条件触发BFC
既然BFC有这样的特性，那怎么样的容器才能算是BFC呢？满足以下条件的容器即触发了BFC：
-
float：left/right（不为none的）。
-
overflow：hidden/scroll/auto
-
display：tebal-cell/table-caption/inline-block/flex
-
position：absolute/fixed（不为relative和static的）
常见的哪些问题可以用BFC解决
1、清除浮动造成得塌陷
浮动元素因为脱离了标准文档流会导致塌陷产生，所以父元素没有了高度。
<div style="background: red; border: solid;">
<p style="float: left;width: 100px;height: 100px;background: blue"></p>
</div>
根据BFC的特性，我们可以通过overflow: hidden;给浮动元素的父元素设置为BFC，让里面的元素不影响外面的布局，用来清除浮动导致的塌陷。
<div style="background: red; border: solid;overflow: hidden;">
<p style="float: left;width: 100px;height: 100px;background: blue"></p>
</div>
2、避免外边距重叠
如果在同一个BFC中，两个元素设置了上下margin外边距，会发生重叠，即边距大的那个生效。（这不是bug，而是规范）
<div style="background: red; height: 100px;margin-bottom: 100px;"></div>
<div style="background: blue; height: 100px;margin-top: 100px;"></div>
我们给上面元素设置了下边距100px，下面元素设置了上边距100px，发现只生效了100px。这时我们使用BFC来避免这种问题：
<div style="overflow: hidden;">
<p style="background: red; height: 100px;margin-bottom: 50px;"></p>
</div>
<div style="overflow: hidden;">
<p style="background: blue; height: 100px;margin-top: 50px;"></p>
</div>
当我们把两个元素放在不同的BFC当中，上下边距各是50px，显示出来也正好是100px，完美解决！
3、避免浮动造成的文字环绕
<div style="width: 200px">
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/20/16fc30935acaedd0~tplv-t2oaga2asx-image.image" width="50" height="50" alt="" style="float: left;">
<p style="background: red;">汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。</p>
</div>
我们给文字元素设置为BFC，环绕消失了，也可以正常设置浮动元素的右边距了。
<div style="width: 200px">
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/20/16fc30935acaedd0~tplv-t2oaga2asx-image.image" width="50" height="50" alt="" style="float: left;">
<p style="background: red; overflow: hidden;">汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。</p>
</div>
