谈谈对BFC的理解

一、BFC的定义
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则,

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

(脱离了标准流)

二、触发BFC的条件
1.浮动元素：float值为left、right
2.overflow值不为 visible，为 auto、scroll、hidden
3.display的值为除了none以外的全部值, inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
4.position的值为absolute或fixed

三、BFC的应用场景
1.避免外边距重叠
当兄弟盒子设置 同时给兄弟元素设置一个下外边距同时设置一个上外边距,发生外边距合并

出现了外边距重叠的问题，原本body 的高应该为 230(第一个盒子的高度100+第一个盒子的margin20+第二个盒子的高度100+第二个盒子的margin10),此时要解决这类问题，就要打开BFC

最佳方法:当我们给第一个盒子一个父盒子，并触发父盒子生成一个BFC,那么两个div就不属于同一个BFC,则不会出现外边距重叠问题。


此时body的高度为230px

2.解决相邻盒子浮动区域重叠问题

因为加了浮动的盒子不占据空间，那么与其相邻的盒子就会与浮动的盒子重叠

解决办法
给相邻的盒子设置overflow:hidden

3.实现两栏布局

左侧设置宽度，右边自适应，右边开启BFC

BFC常用功能总结

1、可以利用BFC解决两个相邻元素的上下margin重叠问题；
2、可以利用BFC解决高度塌陷问题；
3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。