什么是 CSS 中的块格式上下文？

在本文中，我们将了解 CSS 中的块格式化上下文及其实现。块格式上下文是可见 CSS 的一部分，将显示在块框位于外部的网页上。正常流是它所属的定位方案。这是一个块框布局发生的区域，浮动与其他元素交互。根据 W3C：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

这些盒子一个接一个地垂直放置，从它包含的顶部块开始。 margin属性有助于确定 2 个兄弟框之间的垂直距离。它是一个 HTML 框，应至少满足以下条件之一：

• 浮点值不应声明为无。
• 位置值既不是静态的也不是相对的。
• 显示值为 table-cell、table-caption、inline-block、flex 或 inline-flex。
• 不应将溢出的值声明为可见。

下图说明了 Block 格式 Context 存在与不存在的区别。

• 不存在块格式化上下文：

• 块格式化上下文的存在：

我们将通过示例了解块格式上下文的概念。

示例1：本示例通过使用设置在左侧的float属性和显示属性并将其值设置为inline-block来说明块格式上下文的使用；

HTML

  

    
  
    
      
    

  

    

        

            
                GeeksforGeeks
            
              
            

                A Computer Science portal for geeks. 
                It contains well written, well
                thought and well explained computer 
                science and programming articles.
            
        
  
        

            
                GeeksforGeeks Placement
            
              
            

                This course contains Placement 
                preparation tracks and Weekly Mock
                Tests which will help you learn 
                different topics and practice.
            
        
    

  

说明：在这里，我们已经声明了容器类来创建块格式上下文。在容器类中，我们定义了另外 2 个 div 标签，它们具有 block1 和 block2 类，每个类中包含 2 个子 div，每个类具有主类和子主类。我们已经为每个类声明了 CSS 属性。对于 block1 类，为了使其左对齐，我们将float属性的值设置为左，同时将框的宽度设置为 450px。为了使第二个框与第一个框相邻对齐，我们使用了display属性，我们将其值设置为inline-block。我们还使用了 padding-top、margin-top、margin-left 分别具有 5px、18 px 和 15 px 的值。

输出：

示例 2：在此示例中，使用了overflow属性，其值设置为auto将剪辑溢出，如果有任何内容，则添加滚动以显示其余内容。

HTML

  

    
    
    

  

    

        
            GeeksforGeeks
        
          
        

            A Computer Science portal for geeks. 
            It contains well written, well
            thought and well explained computer 
            science and programming articles. We
            provide a variety of services for 
            you to learn, thrive and also have
            fun!
        
    

  

说明：这里，我们用容器类声明了 div 标签，用 subcontain 类声明了 span 标签。为了使盒子向左对齐，我们将float属性的值设置为left，我们也使用了linear-gradient属性。

输出：

优点：

• 块格式化上下文防止边缘下降。
• 块格式化上下文阻止内容包装漂移。
• 块格式上下文有助于感知两种不同物质的对比。