What is Block Formatting Context in CSS ?

Last Updated : 07 Oct, 2021

In this article, we will learn about the Block Formatting Context in CSS & its implementation. A Block Formatting Context is a part of the visible CSS that is to be displayed on the web page in which the block boxes are positioned outside. The normal flow is the positioning scheme for which it belongs. It is an area in which the block box layout takes place in which floats interact with other elements. According to 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.

The boxes are vertically positioned one after another, start from the top block that it contains. margin property helps to determine the vertical distance between the 2 sibling boxes. It is an HTML box that should satisfy at least one of the below conditions:

float value should not be declared as none.
The position value is neither is static nor relative.
The display value is table-cell, table-caption, inline-block, flex, or inline-flex.
The value of overflow should not be declared as visible.

The below figure illustrates the difference between the existence & without the existence of the Block format Context.

Non-Existence of Block Formatting Context:

Existence of Block Formatting Context:

We will understand the Block Format Context concept through the examples.

Example 1: This example illustrates the use of the Block Format Context by using the float property which is set to the left & the display property & set its value as inline-block;

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
  
    <title>Block formatting Context in CSS</title> 
      
    <style> 
        .container { 
            width: 960px; 
            height: 160px; 
            margin: 100px; 
            border: 1px solid black; 
            border-radius: 5px; 
            background-color: rgb(230, 240, 235); 
            font-family: sans-serif; 
        } 
  
        .block1 { 
            float: left; 
            border: 1px solid red; 
            margin-top: 18px; 
            margin-left: 14px; 
            width: 450px; 
            background-color: rgb(183, 199, 232); 
            text-align: justify; 
        } 
  
        .block2 { 
            display: inline-block; 
            border: 1px solid navy; 
            padding-top: 5px; 
            margin-top: 18px; 
            margin-left: 15px; 
            width: 450px; 
            background-color: rgb(165, 232, 202); 
            text-align: justify; 
        } 
  
        span { 
            color: green; 
            font-size: 30px; 
            margin-left: 50px; 
        } 
  
        .block1, 
        .block2 p { 
            padding: 0 7px; 
        } 
  
        .main { 
            margin-left: 120px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="block1"> 
            <span class="main"> 
                GeeksforGeeks 
            </span> 
              
            <p> 
                A Computer Science portal for geeks.  
                It contains well written, well 
                thought and well explained computer  
                science and programming articles. 
            </p> 
        </div> 
  
        <div class="block2"> 
            <span class="submain"> 
                GeeksforGeeks Placement 
            </span> 
              
            <p> 
                This course contains Placement  
                preparation tracks and Weekly Mock 
                Tests which will help you learn  
                different topics and practice. 
            </p> 
        </div> 
    </div> 
</body> 
  
</html>

Explanation: Here, we have declared container class to create the Block Format Context. Inside the container class, we have defined 2 other div tags having the block1 & block2 classes that contain 2 sub div inside each class having main & submain classes. We have declared CSS properties for each class. For block1 class, in order to align it to left, we have set the value of float property as left along with setting the width of the box as 450px. In order to align the 2nd box adjacent to the 1st box, we have used the display property, for which we set the value as inline-block. We have also use padding-top, margin-top, margin-left having the 5px, 18 px & 15 px values respectively.

Output:

Example 2: In this example, the overflow property is used whose value is set to auto that will clip the overflow & if there will be any content then it will add the scroll to display the rest of the content.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>Block formatting Context in CSS</title> 
    <style> 
        .container { 
            background-color: rgb(118, 171, 119); 
            border: 5px solid #7d9ce8; 
            border-radius: 3px; 
            font-family: sans-serif; 
            overflow: auto; 
            width: 550px; 
        } 
  
        .subcontain { 
            background-color: white; 
            background-image: linear-gradient( 
                to top right, yellow, green); 
            border: 1px solid black; 
            border-radius: 2px; 
            color: green; 
            float: left; 
            font-size: 25px; 
            height: 110px; 
            padding-top: 60px; 
            text-align: center; 
            width: 200px; 
        } 
  
        .container p { 
            padding: 15px; 
            text-align: justify; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <span class="subcontain"> 
            GeeksforGeeks 
        </span> 
          
        <p> 
            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! 
        </p> 
    </div> 
</body> 
  
</html>

Explanation: Here, we have declared the div tag with container class & span tag with the subcontain class. For aligning the box to the left, we have set the value of float property as left, also we have used linear-gradient property.

Output:

Advantages:

The Block Formatting Context forestalls edges falling.
A Block Formatting Context stops content wrapping drifts.
Block Formatting Context assists with perceiving contrast in two diverse substances.