css里的BFC

边距重叠: 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

边距重叠的情况有两种

• 父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距
给父元素添加 overflow：hidden
这样父元素就变为 BFC，不会随子元素产生外边距

• 同级兄弟关系的重叠：

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个
可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

什么是BFC

BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

• 当box属性值为以下情况时都会产生BFC

* overflow: auto/ hidden;
* position: absolute/ fixed;
* float: left/ right;
* display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

BFC原理

1. BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2. BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3. BFC的区域不会与float重叠。
4. 计算BFC的高度时，浮动元素也被计算在内。

BFC应用

• 可以用来自适应布局
  利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

• 可以清除浮动：父元素加overflow:hidden/auto,变BFC

• 解决垂直边距重叠：父元素加overflow:hidden,子元素加float: left