CSS之BFC

1. 什么是BFC?

       块级元素格式化上下文(Block Formatting Context)是一个至少满足以下任意一个条件的HTML元素：

             1.float的值不是none

             2.position的值既不是static也不是relative

             3.display的值是table-cell，table-caption，inline-block，flex或inline-flex

             4.overflow的值不为visible

             5.根元素HTML

    注意点：   

            1.BFC元素就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

            2.BFC元素垂直方向的距离由margin决定，属于同一个BFC元素的两个相邻元素的margin会发生重叠

 

    应用实例链接

    参考链接：

          1.Understanding Block Formatting Contexts in CSS

          2.前端精选文摘：BFC 神奇背后的原理