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.
Similar Reads
What is Float Containment in CSS ?
In this article, we will see what is float containment in CSS. The CSS Float Containment is used to improve the performance of web pages by isolating the subpart of the page from the rest of the page. Once the browsers know that a certain part of code is independent then its rendering can be optimiz
3 min read
Does overflow: hidden create a new block formatting context in CSS ?
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 colla
2 min read
Explain the working of the Block Formatting Context
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 ele
4 min read
What is contextual selector in CSS ?
In this article, we will learn about the contextual selector in CSS & understand the declaration syntax with the help of code examples.A contextual selector is defined as a selector which considers the context where the style is to be applied. In simple words, the specified style is applied to a
3 min read
What is First Child in CSS ?
The :first-child CSS pseudo-class is used to select and style the first child element within its parent. It specifically applies to the first child element, and no matter the type of element, it only applies the styles if the element is the very first child of its parent. This is useful when you wan
2 min read
Primer CSS Body Content Utilities
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
CSS | border-block-start Property
The border-block-start property in CSS is used to define the individual logical block-start border property values in a single place in the style sheet. This property place the border at the top of the defining element. Syntax: border-block-start: border-width|border-style|border-color; Property val
2 min read
CSS Text Formatting
CSS Text Formatting allows you to control the visual presentation of text on a webpage. From changing fonts to adjusting spacing and alignment, CSS provides powerful properties to enhance the readability and aesthetic of text. CSS lets you adjust font properties, text alignment, spacing, and decorat
9 min read
CSS | border-block-start-width Property
The border-block-start-width property in CSS is used to define the individual logical block-start border property values in a single place in the style sheet. This property sets the border-width at the top of the defining element border. Syntax: border-block-start-width: border-width; Property value
1 min read
What is the @content directive used for ?
What is @content directive? @content is a SASS At-rule used to reuse a block of code by reducing the repetition of the same code. It is used as a body in the @mixin to include a block of code that is passed via @include.  Example 1: Run the below code with the SASS preprocessor. It replaces the @c
3 min read