CSS-BFC

BFC---block formatting context块级格式化上下文
   
 BFC是一个独立的渲染区域，只有块级元素参与，它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此，包括浮动和外边距合并等等，有了这个特性我们布局的时候就不会出现意外情况了。

什么情况下会触发bfc

1． 设置了float属性，并且不为none
2． position属性为absolute或fixed
3． display为inline-block、table-cell、table-caption、flex、inline-flex
4． overflow属性不为visible

BFC元素所具有的特性

1． 在bfc中，盒子从顶端开始垂直地一个接一个的排列；
2． 盒子垂直方向的距离由margin决定，属于同一个bfc的盒子的margin会重叠；
3． 在bfc中，每一个盒子的左边缘会触碰到父容器的左边缘内部，也就是说在没有margin和padding时，父border的内边和子border的外边重叠；
4． bfc的区域不会与浮动盒子产生交集，而是紧贴浮动边缘；
5． 如果父盒子没有设置高度，但子盒子中有浮动元素，那么在计算bfc的高度时， 会计算上浮动盒子的高度。

bfc的主要用途

清除元素内部浮动

只要把父元素设置为bfc就可以清除子元素的浮动，最常见的就是给父元素添加overflow：hidden属性。