BFC是什么?触发BFC的条件有哪些？

BFC(block formatting context)翻译为“块级格式化上下文”，它会生成一个独立的渲染区域(不影响外面的元素，同时也不受外面元素的影响)，它的生成有以下规则：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3551.html

• 内部的box会在垂直方向上一个接一个的放置
• 内部box在垂直方向上的距离由margin决定，同属一个BFC内的相邻box会发生margin重叠
• 每一个内部box的左边，与BFC的的左边相接触，即使存在浮动也是一样
• BFC的区域不会与float box发生重叠
• 计算BFC的高度时，浮动元素也参与计算(上面清除浮动的问题就是这个原理)

触发BFC的条件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3551.html

• 根元素
• float属性不为none
• position为absolute或者fixed
• display为inline-block、table-cell、table-caption、flex、inline-flex
• overflow不为visible