什么是BFC首先什么是FC，FC的全称是FormattingContext（格式化上下文）。标准流程中的元素都是一个FC，比如div、p标签等都属于一个FC。看看W3c文档对standardflowandformattingcontext的解释9.4NormalflowBoxs在normalflow中属于一个formattingcontext，可以是block也可以是inline，但不能同时。块级框参与块格式化上下文。内联级框参与内联格式化上下文。简而言之，块级元素的布局属于BFC（BlockFormattingContext）。行内级元素的布局属于IFC（InlineFormattingContext）。那么我们可以理解为块级元素布局上下文环境就是BFC，就是一个大盒子，它与外界环境隔离形成一个BFC条件（直接照搬MDN）来创建一个新的块格式上下文。元素不是唯一可以创建块格式上下文的元素。任何块级元素都可以通过应用某些CSS属性来创建BFC除了文档的根元素()之外，在以下情况下将创建一个新的BFC：使用float浮动的元素是绝对定位的元素（包含position:fixed或position:sticky元素使用以下属性display:inline-blocktablecells或使用display:table-cell，包括所有表格单元格使用display:table-*attributestableheaders或使用display:块级元素的overflow属性table-caption元素的不可见元素的属性为display:flow-root或display:flow-rootlist-item元素的属性为contain:layout,content,orstrictflexitemsgridlayoutelementmulticolcontainersSet元素属性column-spantoall总结一下：html是BFC，body不是BFC，overflow属性除了visible都是BFC9.4.1[Blockformattingcontexts]()在块格式化上下文中，盒子一个接一个地垂直排列，从包含块的顶部开始。两个同级框之间的垂直距离由“边距”属性确定。块格式化上下文中相邻块级框之间的垂直边距折叠。在块格式化上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左格式，右边缘接触）。即使存在浮动也是如此（尽管框的行框可能会因浮动而缩小），除非框建立了新的块格式上下文（在这种情况下框本身可能会因浮动而变窄）。简要概述如下在BFC中，盒子会在垂直方向上一个接一个排列。难怪块级元素会占据一行。原来BFC的作用是垂直间距是由margin属性决定的决定了在同一个BFC中，相邻两个box之间的margin会在BFC中折叠，每个元素的左边缘在next到包含块的左边缘。我们刚才说html也是一个BFC。现在大家知道了，为什么页面布局的时候默认总是左对齐呢？那这东西有什么用呢？解决marginfolding问题，我们可以组成两个不同的BFC，因为只有在同一个BFC中，相邻两个boxes之间的margin才会被折叠解决浮动高度塌陷问题BFC需要满足两个条件才能解决高度塌陷1.浮动父元素触发BFC形成独立的块格式化上下文2.浮动元素的父元素是auto10.6.7['Auto'heightsforblockformattingcontextroots]()在某些情况下（参见，例如，章节10.6.4和10.6.6），建立块格式化上下文的元素的高度计算如下：b的底部最底部的线框。如果它有块级子框，则高度是最顶部块级子框的顶部边距边缘与最底部块级子框的底部边距边缘之间的距离。绝对定位的孩子被忽略，相对定位的盒子被认为没有它们的偏移量。请注意，子框可能是匿名块框。此外，如果元素有任何浮动后代，其底部外边距边缘低于元素的底部内容边缘，则高度会增加以包括这些边缘。仅考虑参与此块格式化上下文的浮点数，例如，绝对定位后代内的浮点数或其他浮点数不考虑在内。当BFC的高度为auto时，它是通过以下方法计算的高度的1。如果只有inline-level，就是行高的top和bottom之间的距离。2.如果有block-level，就是bottomblock上边缘到bottomblock下边缘的距离。3.如果有绝对定位元素，会被忽略4.如果有浮动元素，会增加高度以包含这些浮动元素的下边缘
