【 什么是BFC?】BFC的全称是block-formatting-context， 对应其中文翻译就是块级格式上下文，它是一个独立的渲染区域，我们可以把BFC理解为，一个封闭的容器，内部的元素无论怎么变化都不会影响到外部，容器内的样式布局自然也不会受到外界的影响。【BFC内部规则】1BFC它就是一个块级元素，块级元素会在垂直方向上一个接一个的往下排列，2BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签，3BFC区域不会与浮动的容器发生重叠，4属于同一个BFC的两个相邻元素的外边距会发生重叠，垂直方向的距离由两个元素中margin的较大的值决定，5计算BFC的高度时，浮动元素也会参与计算。【如何触发BFC? 】通过添加CSS属性，就可以触发，overflow:hidden；除了visible以外的值，position:absolute/fixed；display:inline-block/flex；
【BFC到底解决什么问题】？它可以阻止元素被浮动元素覆盖，例如，一个两栏布局，左边div宽度固定，同时设置左浮动，右边的div自适应，此时由于浮动元素脱离文档流了，不占据空间，那么就会导致右侧的div到了最左边，同时左侧浮动的div还会覆盖在上面，这时候我们就可以通过把右侧的div元素设置为一个BFC,比如可以给它添加display:flex；属性来触发，就可以解决右侧被左侧覆盖的问题。
能够解决父元素没有高度，子元素设置成浮动元素时，产生父元素高度塌陷问题，比如一个容器内的两个div都是浮动元素，此时我们给父元素添加一个红色的背景色，会发现没有任何效果，因为父元素高度塌陷，高度为0，这个时候我们就可以添加一个触发BFC功能的属性，因为BFC有个规则是计算BFC高度时，浮动元素也会参与计算，所以触发BFC后，父元素的高度就会被撑开，也就是会产生清除浮动的效果。
第三可以解决margin边距重叠的问题，比如一个容器里有两个div,一个div的下边距的margin设置的是10px,一个div的上边距设置的是20px,那这两个盒子之间的距离是20px，而不是30px，这就是margin塌陷问题，这个时候margin应为两个div之间较大的那个margin值，而不是两者相加，如果就想让他们之间的间距是30px，就需要触发一个div的BFC,它的内部就会遵循BFC规则，解决办法是为元素包裹一个盒子，形成一个完全独立的空间，做到里面的元素，不被外面的元素影响。