什么是BFC
BFC就是"块级格式化上下文"的意思， BFC它是一个保护内部元素不受外部影响的独立区域 如何触发BFC
1. 浮动元素，float 除 none 以外的值； 2. 绝对定位元素，position（absolute，fixed）； 3. display 为以下其中之一的值 inline-block，table-cell，table-caption； 4. overflow 除了 visible 以外的值（hidden，auto） BFC的应用
- 可用于自适应布局
例如:(非常经典的例子)) 左固定，右自适应 left设置宽高，浮动，left会脱离文档流，left就会压在right上面 解决办法： 给right加overflow:hidden；使其变成BFC，消除外部left浮动对他的影响 - 可清除浮动
当父元素中的子元素设置浮动时，父元素没有设置高度。此时，子元素与文档流分离，父元素无法感知子元素的高度，导致父元素坍塌,它将成为一条线 解决办法： 这时候给父元素添加overflow:hidden / auto,变成BFC这个问题可以解决。 - 解决垂直边距重叠问题
BFC边距重叠有两种情况，即： 第一种：
父子关系，子元素放在父元素上，如果子元素设置margin-top 我们想象的是子元素会向下移动一点 但是实际上是父元素跟着往下移动了 解决办法： 所以这个时候我们需要把父元素变成父元素BFC，添加父元素overflow:hidden属性 第二种：
兄弟关系，有两个盒子，上面的盒子设置margin-bottom:50px;下面的盒子设置margin-top:30px 中间间距是50px，如果设置了这样的双边距，按最大限度 解决办法： 可通过添加空元素或伪元素来设置overflow:hidden;解决margin重叠问题 // 空元素可以添加到两个盒子的中间 <div style='overflow:hidden'></div>