BFC的定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 通俗来说，BFC就是一个独立的容器，在这个容器中的元素不会对容器外面的元素产生影响。
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC的布局规则

• 内部的box会在垂直的方向，一个接一个的放
• 元素的垂直方向的距离由margin决定，在同一个BFC中的两个相邻box的margin会发生重叠
• 每个元素的margin box的左边，与包含块border box的左边相接触，即使在浮动元素中也是这样
• BFC的区域不会与float box叠加，利用此特性可以实现两列布局，左边固定宽度，右边自适应
• 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.利用BFC清除浮动

这个HTML文档在浏览器的样式如下

2.利用BFC避免margin重叠

页面生成的效果如下

根据BFC的布局规则第二条，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC

3.阻止元素被浮动元素覆盖

给一个元素添加浮动属性，覆盖了另一个元素；如果不要覆盖，触发被覆盖元素的BFC属性

效果如下

解决办法 触发BFC