Does overflow: hidden create a new block formatting context in CSS ?

Last Updated : 11 Jul, 2022

In this article, we will see “Does overflow:hidden create a new block formatting context(BFC)?”.

The answer is yes, the overflow property with value anything but visible(because its default) will create a new block formatting context. And as we know block formatting context prevents edges from collapsing, prevents content wrapping drifts, and helps readers perceive the contrast between two different elements. This can be helpful for aligning a block element next to a floating element.

Example 1: This following code example shows how a block element is aligned next to floating element without overflow:hidden.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .container { 
            border: 4px solid black; 
            width: 600px; 
        } 
  
        .box { 
            float: left; 
            font-size: 24px; 
            height: 100px; 
            width: 200px; 
            color: white; 
            background: green; 
            text-align: center; 
            padding: 20px; 
        } 
  
        .container p { 
            font-size: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3>Alignment without overflow:hidden</h3> 
    <div class="container"> 
        <span class="box"> 
            GeeksforGeeks 
        </span> 
        <p> 
            A Computer Science Portal For Geeks. 
        </p> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: This following code example shows how a block element is aligned next to floating element without overflow:hidden.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .container { 
            border: 4px solid black; 
            width: 600px; 
            overflow: hidden; 
        } 
  
        .box { 
            float: left; 
            font-size: 24px; 
            height: 100px; 
            width: 200px; 
            color: white; 
            background: green; 
            text-align: center; 
            padding: 20px; 
        } 
  
        .container p { 
            font-size: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3>Alignment with overflow:hidden</h3> 
    <div class="container"> 
        <span class="box"> 
            GeeksforGeeks 
        </span> 
  
        <p> 
            A Computer Science Portal For Geeks. 
        </p> 
    </div> 
</body> 
  
</html> 