1.什么是BFC
块格式化上下文（Block Formatting Context，BFC） ，它是一个独立的渲染区域，规定了内部的block如何布局，并且与这个区域外部毫不相干
2. 形成BFC的条件
根元素body或其他包含它的元素
- 浮动（元素的
float不为none）； - 绝对定位元素（元素的
position为absolute或fixed）； - 行内块inline-blocks（元素的
display: inline-block）； - 表格单元格（元素的
display: table-cell，HTML表格单元格替代属性）； - 弹性盒flex box（元素的
display: flex或inline-flex）； overflow的值不为visible的元素；
最常见的就是overflow:hidden，float:left/right，position:absolute,也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了
3. BFC的原理（效果）
- 内部的box会在垂直方向一个接一个放置（可以预定义BFC中有一个的常规流）；
- box垂直方向的距离由margin决定，属于同一个bfc的两个相邻的box的
margin会发生重叠（或者说发生边际崩溃）； - 每个元素的边距框的左边，与容器块边界框的左边相接触（对于从左往右的格式化，否则相反）；
- BFC区域
不会与浮动区域重叠；可用来解决元素被浮动元素覆盖 - BFC就是页面上的
一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；可以解决用来margin重叠问题 - 计算BFC的高度时，考虑BFC所包含的所有元素，连
浮动元素也参与计算；可用来解决父元素高度塌陷问题
4. BFC的作用
4.1 解决外边距折叠（margin重叠）
在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象
根据BFC是一个隔离的独立容器可以用overflow：hidden在bfc中再产生一个bfc来解决
4.2 清除浮动/父元素高度塌陷问题
当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动
根据BFC计算高度的时候就连浮动元素也算进去设置父元素overflow:hidden
4.3 解决元素被浮动元素覆盖
由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题
根据BFC区域不会与浮动区域重叠可以给右侧元素添加overflow:hidden，触发BFC来解决遮挡问题
