Explain the working of the Block Formatting Context

Last Updated : 02 Feb, 2023

What is Block Formatting Context (BFC)?

Block Formatting Context is a layout concept used in CSS to determine the position and size of elements on a webpage. It is used to control the layout of elements on a webpage, such as positioning elements in a specific location and controlling the size of elements. In this article, we will discuss the working of the Block Formatting Context, including its properties, approaches, and examples of its usage. It helps to determine the position and size of elements on a web page. In simple terms, a BFC is a rectangular area in which content flows and the layout of its contents is determined. The creation of a BFC helps to establish a new block-level formatting context, which can have its own layout rules and styles.

A Block Formatting Context is created when a layout container is established, such as a block element or an inline-block element. The elements inside this container are then positioned and sized based on the properties of the container. The Block Formatting Context is used to control the layout of elements on a webpage, such as positioning elements in a specific location and controlling the size of elements.

The problem statement that BFC addresses is the issue of overlapping or unexpected layout behavior of elements due to the default behavior of HTML elements. For example, a floated element may overlap a non-floated element that comes after it, or a relatively positioned element may be placed outside of its parent container.

A BFC is created by at least one of the following:

The root element (HTML)
A floating element (with a value of left or right)
A block-level element with the property "overflow" set to "hidden" or "scroll"
An inline-block element
A table-cell element
A table-caption element

1. Contain Internal Floats:
A BFC helps to contain internal floats, which means that a floating element contained within a BFC will not interfere with the layout of other elements outside of it. This helps to ensure that elements are displayed properly and prevents elements from overlapping or covering each other.

Example: Here is an example of creating a BFC using the internal floats property:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            overflow: hidden;
            background-color: yellow;
            width: 400px;
        }

        .float {
            float: left;
            width: 100px;
            height: 100px;
            background-color: green;
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <div class="float">GeeksForGeeks</div>
    <div class="container">
        <h3>Block Formatting Context</h3>
    </div>
</body>

</html>

The green block will be contained within the yellow block, and will not overlap or interfere with other elements outside of the blue block.

Output:

2. Exclude External Floats: A BFC also helps to exclude external floats, which means that elements within a BFC will not be affected by the layout of elements outside of it. This helps to ensure that the layout of elements within a BFC is unaffected by the layout of elements outside of it.

Example: Creating a BFC by using overflow property and setting it to hidden or auto. This can be illustrated in the following example:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            overflow: hidden;
            background-color: lightblue;
            width: 400px;
        }

        .float {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="float">GeeksForGeeks</div>
    <div class="container">
        <h3>Block Formatting Context</h3>
    </div>


</body>

</html>

The yellow block will not affect the layout of the blue block, and the text within the blue block will not be affected by the yellow block.

Output:

3. Prevent Margin Collapsing: A BFC also helps to prevent margin collapsing, which is a phenomenon in which two or more vertical margins come together and become one. A BFC helps to prevent this by creating a new formatting context in which margins are treated as separate and distinct.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            overflow: hidden;
            background-color: lightblue;
            width: 400px;
            margin-top: 20px;
        }

        .box {
            height: 100px;
            background-color: yellow;
            margin-top: 20px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="box">
            <h3>GeeksForGeeks</h3>
        </div>
    </div>



</body>

</html>

The yellow box will have a margin-top of 20px, separate from the margin-top of the blue container. If the blue container did not have a BFC, the two margins would collapse and the total margin-top would be equal to the larger of the two margins.

Output:

Conclusion: The Block Formatting Context is an important concept in CSS layout that helps to determine the position and size of elements on a web page. It helps to contain internal floats, exclude external floats, and prevent margin collapsing, which allows for a precise and predictable layout on a web page. Understanding the working of BFC and how it affects the layout of elements is essential for creating effective and visually appealing web pages.

What is Block Formatting Context in CSS ?

nayan_nand

Improve

Article Tags :

Explain the working of the Block Formatting Context

Similar Reads

Thank You!

What kind of Experience do you want to share?