二、BFC
1.什么是BFC
BFC全称Block Formatting Contexts翻译过来就是块级格式化上下文
BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，我们可以利用它来解决外边距重叠的问题，BFC并不是专门用来解决这个问题而创的；
2.如何触发BFC？
在box属性值为这些的情况下，都会让所属的box产生BFC。
overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
也可以用排除法：
overflow的值不是visible；
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex
BFC的原理？(面试可不说，但要理解)
- BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
- BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。 BFC的区域不会与float重叠。
- 计算BFC的高度时，浮动元素也被计算在内。