本文主要介绍BFC和级联上下文的相关知识点。BlockFormattingContext（BFC）一、BFC的定义BFC（BlockFormattingContext）：是一个独立的渲染区域，框内元素的布局不会影响框外。属于正常流量。2.那些方法会创建一个块格式化上下文1）根元素（）body2）浮动元素（元素的浮动不是没有）3）绝对定位元素（元素的位置是绝对的或固定的）4）内联块元素（该元素的展示是inline-block）5）溢出值不可见的块元素6）弹性元素（展示是flex或inline-flex元素的直接子元素）7）网格元素（display为grid或inline-grid元素的直接子元素)8)tablecell（该元素的显示为table-cell，HTMLtablecell默认为该值）9)tabletitle（该元素的显示元素为table-caption，HTML表格标题默认为该值）10）匿名表格单元格元素（元素的显示为table、table-row、table-row-group、table-header-group、table-footer-group（分别为HTMLtable、row、tbody、thead、tfoot的默认属性）或inline-table）11）显示值为flow-root的元素12）contain值为layout、content或paint的元素13）multi-column容器（元素的column-count或column-width不是auto，包括column-count为1）14）具有column-span的元素总是创建一个新的BFC，即使元素没有被包裹在多列中容器（标准更改，Chrome错误）。3.BFC的特点及应用：1）同一个BFC的bottommargin会塌陷。如果要避免外边距塌陷，可以放在不同的BFC容器中2）BFC可以包含浮动元素，即clearfloating3）BFC可以防止元素被浮动元素覆盖，可以用于实现两列自适应。排满一行后再换行，块级元素会被渲染成一个完整的新行。除非另有说明，否则默认情况下所有元素都按正常流定位。也可以说元素在正常流中的位置是由HTML文档中元素的位置决定的。5.MarginfoldingrulesMargincollapsing：块级元素的上下边距有时合并（或折叠）为一个外边距，其尺寸最大。请注意，浮动元素和绝对定位元素的边距不会折叠。发生margincollapse的三种基本情况：1）两个相邻元素之间的margin会塌陷（除非后面的元素需要清除前面的float）。2）如果父元素与其第一个子元素之间没有border、padding、inlinecontent，也没有创建blockformattingcontext，或者清除两者的margin-top；或者在父元素和它的最后一个子元素之间没有border,innermargin,inlinecontent,height,min-height,max-height来隔开两者的margin-bottom，那么之间就会有一个fold两个外边距。这时候，子元素的外边距就会“溢出”到父元素的外面。3）如果一个块级元素不包含任何内容，其margin-top和margin-bottom之间也没有border、padding、inlinecontent、height、min-height来分隔两者，那么top和bottom元素边距折叠。参考链接：MDN上的BFC概念AboutBlockFormattingContext——hasBFC和IE的Layout10分钟看懂BFC的原理堆叠上下文是这些HTML元素沿着一个假想的z轴相对于用户的三维视觉。HTML元素根据其元素属性按优先顺序占据此空间。默认情况下，网页内容垂直呈现，没有偏移角度。堆叠内容时，必须有前后堆叠的顺序。所有元素都有一个堆叠级别，文档根元素创建堆叠上下文。普通元素的层叠层次首先由层叠上下文决定，因此层叠层次的比较只有在当前层叠上下文元素中才有意义。2.折叠顺序图像侵权删除CSS堆叠顺序（从低到高）：堆叠上下文元素的背景/边框（装饰属性）->负z-index->??块水平框（布局）->浮动浮动框（布局）->inline/inline-blockhorizo??ntalbox(content)->z-index:autoorasz-index:0orastackingcontextthatdoesn'tdependentonz-index->positivez-index注：z-index在其实:0和z-index:auto可以简单的从层次上看是一样的。注意这里的措辞——“纯粹从级联层面”，其实两者在级联上下文领域有着根本的区别。当z-index不为0时，只有position值为absolute和relative且flex的item的z-index不为0时，才会产生stackingcontext。3.折叠规则及特点堆叠规则：1）在同一个堆叠上下文字段中，大的堆叠层级覆盖小的。将覆盖前面堆叠上下文元素的特点：1）堆叠上下文的堆叠级别高于普通元素2）堆叠上下文可以阻止元素的混合模式外部堆叠上下文4）每个堆叠上下文是独立于兄弟元素，即在进行更改或渲染时，只需要考虑后代元素5）每个堆叠上下文都是自包含的，当元素被堆叠时4.如何创建堆叠上下文：1）文档根元素（);2）position值为absolute（绝对定位）或relative（相对定位）且z-index值为非auto的Elements；3）position值为fixed（固定定位）或sticky（粘性定位）的元素（sticky定位适用于所有移动设备上的浏览器，但旧的桌面浏览器不支持）；4)flex(flexbox)容器的子元素，子元素的z-index值不是auto；5）网格（grid）容器的子元素，且z-index值不是auto；6)opacity属性值小于1的元素。当opacity的值不为1时，堆叠顺序为z-index:auto层级，与没有值的绝对定位元素处于同一层级；7）mix-blend-mode属性值不正常的元素；8)以下任何一个属性的值都不是NONE的元素：a．转变B.过滤器C.透视d.Clip-PathE.Mask-Image/Mask-Border9)ISOLATION属性值为Isolate元素；10)-webkit-Overflow-Scrollling11)其will-change值设置任何属性的元素，当该属性具有非初始值时创建堆叠上下文12)包含其属性值为layout、paint或包含其中之一的元素具有复合值（例如contain:strict、contain:content）。示例：
