BFC
display 为 block, list-item, table 都是块元素。
只有块元素才可能触发 BFC。
- 根元素
- float 不为 none （每个浮动元素都是一个独立的 BFC, 他们的 margin 不会重叠）
- display 为 inline-block, table-cell, table-caption, flex, inline-flex
- overflow 不是 visible
- position 不为 static 或者 relative
特性
BFC 中，盒子从顶部开始垂直一个一个排列。
垂直方向的距离由 margin 决定。属于同一个BFC的两个相邻盒子的 margin 会发生重叠
BFC 中子元素的 margin-left 会碰到父元素的 margin-left
计算 BFC 高度时，浮动元素和定位元素也参与计算。
BFC 的区域不会与浮动盒子产生重叠，而是紧贴浮动边缘。
BFC 是一个独立容器，里面的元素不会影响到外面的元素，外面的也无法影响里面的
使用
清浮动
只要把父元素设为 BFC 就可以清浮动了，因为
计算BFC高度时，浮动元素也会参与到高度计算中解决边距重合问题
两个块元素垂直方向 margin 重叠，只要两个块元素不属于同一个 BFC 即可。
同一个 BFC，相邻的两个盒子 BFC 会发生重叠，因为一般两个盒子都在 <body> 这个 BFC 中，它默认就是一个 BFC 元素，所以里面的元素需要自己改成不同的 BFC制作右侧自适应盒子
普通流元素 BFC 后，为了不予浮动元素产生交集，会顺着浮动边缘形成自己的封闭上下文
如图，p 元素变成 BFC 后，绕着绿色的浮动元素边缘。右侧宽度自适应，与浮动元素同行展示，
这是不加 BFC 时，p 与浮动元素重叠了。
父元素与第一个子元素的上外边距发生合并
给子元素或者父元素创建 BFC，子元素不能使用 overflow 生成 BFC，其他无限制，或给子元素外面套一个 BFC。
能用这个方法解决的原因大概是 BFC 的内容不能影响到 BFC 之外的元素，网上搜了一圈没有找到解释，自己猜的
（或者给父元素添加 padding-top 或者 border-top，也可以解决。 因为第一个子元素的 border-top 会先去看看有没有能限制它位置的东西，先找父元素的 padding-top，再去找 border-top，如果都没有，那就肆无忌惮自己顶出去了。。所以只要给父元素加一个边界就能卡住子元素的外边距）
总结
BFC 就是页面上的独立容器，里面的元素不会影响外面的元素，了解了之后，就可以轻松解决浮动和外边距合并带来的布局问题，只要给他们都加上一个 BFC 的父元素，或者把它们变成 BFC 即可。
