浮动、绝对定位的元素、不是块框的块容器（例如，inline-blocks、table-cells和table-captions）和溢出不可见的块框（当Values已经传播到viewport时（除非那个值已经传播到viewport））会为其内容建立一个新的blockformattingcontextBFC布局规则：BFCinnerboxes会在垂直方向，一个在后另一个放置框的垂直距离由边距决定。属于同一个BFC的两个相邻框的外边距将与每个元素的外边距框的左侧重叠，并触及包含块边框框的左侧（对于从左到右的格式，否则相反）。即使有浮动，BFC区域也不会和浮动框重叠（这个特性可以用来自适应窗口大小）。BFC是页面上一个隔离的独立容器，容器内的子元素不会影响外面的元素。计算BFC高度时也是如此，浮动元素也参与计算（清浮动原理）。块格式化上下文由以下之一创建：根元素或包含它的其他元素是浮动的（元素的浮动不是无）绝对定位的元素（元素的位置是绝对的或固定的）内联块内联块（元素有display:inline-block）表格单元格（元素有display:table-cell，表格单元格默认属性）表格标题（元素有display:table-caption，表格标题默认属性）块元素元素有溢出值notvisibleflexboxesflexboxes(元素有display:flex或inline-flex)display:flow-root块格式化上下文包括创建元素内部的所有内容，除了创建新块格式化上下文的元素BFC和marginBFC可以解决边缘折叠问题。需要注意的是overflow:hidden等属性只在父子元素下起作用，相邻兄弟元素无效BFC有了floatBFC，可以改变浮动覆盖兄弟元素的问题，实现一侧固定宽度的布局，并解决了父元素崩溃的问题。详解，BFC学习CSS中的格式化上下文
