BFC

什么是BFC
BFC即 Block Formatting Contexts (块级格式化上下文)， 是 W3C CSS2.1 规范中的一个概念。

BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

BFC的布局规则
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 。
从左往右的格式化，包括浮动。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
创建了BFC的元素具有下面的特性：

清除浮动只能清除同一BFC中在它前面的元素的浮动；
外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上。
怎样触发BFC
列举几个触发BFC的CSS样式：
position:absolute、fixed;
display:inline-block、flex、inline-flex、grid、inline-grid、flow-root;
overflow值不为visible的块元素。
推荐使用display:flow-root;，它不会带来其他副作用，是一个很好的选择。而overflow:auto;也是一个合适的选择。