BFC和堆叠上下文之间有什么区别？

Question

这些让我很困惑。

Block_Formatting_Context和stacking_context有什么区别？

谢谢你！

Answer 1

  

块格式化上下文是网页的可视CSS呈现的一部分。它是块盒布局发生的区域，浮动体相互作用。

     

阅读更多：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

并且

  

堆叠上下文是相对于假定面向视口或网页的用户而言，沿着假想的z轴的HTML元素的三维概念化。 HTML元素基于元素属性按优先级顺序占用此空间。

     

阅读更多：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Answer 2

stacking context由七个不同的图层组成（从下到上）：

• 建立堆叠上下文的元素的背景和边框
• 具有负堆栈级别的后代的堆叠上下文
• 正常流程中的块级后代
• 浮动后代及其内容
• 正常流程中的内联级后代
• 定位z-index为auto或0
的后代
• 具有正堆栈级别的后代的堆叠上下文

可以通过向容器添加任何必要的CSS条件（如block formatting context）来创建新的overflow: scroll, overflow: hidden, display: flex, float: left, or display: table。虽然上述任何条件都可以创建block formatting context，但也会产生一些其他影响：

• display：表可能会在响应性方面产生问题
• overflow：滚动可能会显示不需要的滚动条
• float：left将元素推向左侧，其他元素环绕
• overflow：hidden会剪切溢出的元素