链接

文档流

常说的文档流可以分为定位流，浮动流，普通流三种。而普通流其实就是指BFC中的FC（formatting context），直译过来就是格式化上下文，它是页面上的一块渲染区域，有一套渲染规则，决定了其子元素如何布局以及和其他元素之间的关系和作用。常见的FC有BFC，IFC，GFC，FFC。BFC是block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。

BFC

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。它与普通的块框类似，但不同之处在于：

  1. 可以阻止元素被浮动元素覆盖

  2. 高度计算是会包含浮动元素，解决父元素高度坍塌的问题

  3. 属于同一个BFC的两个相邻块级资源素的上下外边距会发生坍塌的现象，所以当两个相邻块级子元素分属于不同的BFC时可以阻止外边距坍塌。