BFC是什么

含义：Block Farmat Context ——块级格式化上下文

• 它是页面中的一块渲染区域，有一套渲染规则，决定了里面的子元素如何布局，以及和其他元素之间的关系和作用 。他是一个独立的容器，里面的元素与外界隔离，互不影响。

如何触发

• 根元素，即HTML标签，是最大的一个BFC。
• 给元素设置浮动，触发BFC。
• overflow不为visible，设置为auto、scroll、hiddden等都可以触发BFC。
• display的值为inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid。
• 绝对定位，position的值为absolute或fixed。

作用和规则 

• 触发BFC的元素的子元素，会在垂直方向上一个接着一个放置。
• 子元素垂直方向上的距离由margin决定。（解决外边距塌陷问题）
• BFC中子元素不会超出他的包含块，而绝对定位的元素可以超出他的包含边界。
• BFC的区域不会与float得到元素区域重叠。（阻止元素被浮动元素覆盖）
• 计算BFC高度的时候，浮动子元素也会参与计算。（解决父盒子高度塌陷问题）