BFC（块格式化上下文 (Block Formatting Context)）是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
----外边的元素布局不影响里面的，里面的元素也不受外边的影响BFC的原理（渲染规则）：
1.垂直方向发生重叠
2.BFC的区域不会与box重叠（因此可以用来清除浮动）
3.BFC是一个独立的容器，外面的元素不会影响里面的元素，反之，里面的元素也不会影响外面的元素
4.计算BFC的高度时，浮动元素不参与计算
如何创建BFC
1.float的值不为null
2.position的值不为static或者relative
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow的值为hidden或者auto
清除浮动的四种方式
1.overflow: hidden
找到浮动元素的父元素，添加overflow: hidden，触发BFC清除浮动
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
2.额外标签法
在最后一个浮动标签后，新加一个标签，给其设置clear：both；
缺点：margin失效。两个div之间，没有任何的间隙
3.使用after伪元素清除浮动
1.overflow: hidden
找到浮动元素的父元素，添加overflow: hidden，触发BFC清除浮动
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
2.额外标签法
在最后一个浮动标签后，新加一个标签，给其设置clear：both；
缺点：margin失效。两个div之间，没有任何的间隙
3.使用after伪元素清除浮动