BFC到底是什么

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

怎样触发BFC
这里简单列举几个触发BFC使用的CSS属性
overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

BFC的规则
BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算

我先把这个定义复制过来，这个东西你们看懂了吗？反正我是没有看懂。我也看了其他一些文章，解释的都差不多，但是关于这个东西到底是什么感觉还是有些抽象。后来想想其实我们也并不需要过于关注这个东西是怎么描述的，我们只要记住这个东西用什么用法就行了，总结下来有下面几个用处
１.当子元素使用了浮动，把浮动元素给包起来，父元素管住子元素，不让它乱跑

我们知道当给子元素加了浮动，子元素就会脱离原来的文档流，也就是不在占有空间了就会出现这样的情况

那出现这种情况就不太好了，因为会影响下面盒子的布局，假如在下面加了一个盒子


就会这样，它影响到了下面这个元素，那现在我试着给父元素加一个BFC的规则


这样就不会影响到外面的标签了

２.兄弟元素之间划清界限

图片是这样

可能按照我们本能的理解，它们两个之间应该是１０ｐｘ宽
同样的这里也互相影响了布局