什么是BFC？BFC（BlockFormattingContext）块级格式化上下文是一个独立的渲染区域，指定了内部框的布局方式，不会受到外界的影响。在BFC中，行盒和块盒沿着父元素的边界排列。BFCfloat的值如何形成，不是没有。位置的值不是静态的或相对的。display的值为inline-block、table-cell、flex、table-caption或inline-flexoverflow，inline-flexoverflow的值为不可见。BFC规则内的框将在垂直方向上一个接一个地放置。Box的垂直距离由margin决定。属于同一BFC的两个相邻框的边距将重叠。每个框（块框和行框）的边距框的左侧接触包含块边框框的左侧（对于从左到右的格式，反之亦然）。即使存在浮动也是如此。BFC的区域不会和浮动框重叠。BFC是页面上一个隔离的独立容器，容器内部的子元素不会影响外部的元素。反之亦然。BFC计算高度时，浮动元素也参与计算。
