CSS Block Formatting Context
Tags: beginners, css
Published: 2019-11-18 11:51:12

---
title: CSS Block Formatting Context
published: true
description: A beginners guide to the CSS Block formatting Context
tags: beginners, css
series: FrontEnd Development Zero to Hero
---

<center><small>_This post was originally published on June 25, 2019 under the title "Introduction to CSS Block Formatting Context". Edited and Published to fit the theme of this series_</small></center>

We concluded the last post on [CSS Floats](https://dev.to/ziizium/css-floats-309c) when i mentioned that floats have a close relationship with _Block Formatting Context_.

If we recall quite clearly we'll know that floats is used to position an element on the right or left of its container and still remain with the page flow unlike absolute positioned elements that are taken out of flow and placed in a new location using offset properties.

The relationship between these positioning techniques (floats and absolute) is that: Under a given condition they both establish a _Block Formatting Context_.

One of the main reason a page element can be positioned with float or absolute positioning is when we are dealing with layouts and familiarity with the _Block Formatting Context_ will be an added bonus.

_The following snippets will be used in this post with slight modifications along the way. Please save the snippets with the `.html` and `.css` extension respectively and make sure the CSS file is linked with the HTML. Remember all HTML snippets should be placed between the start and closing `body` tag in your HTML_.


```html
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
```
```css
.parent {
  margin: 2em auto;
  height: 150px;
  background-color: rgb(200,200,200);
  width: 500px;
}
  
.child {
  margin: 30px 20px 0 20px;
  width: 100px;
  height: 100px;
  background-color: rgb(250,219,92);
}
```

_And kindly note that all screenshots are from <b>Firefox</b> web browser and its Developer Tools._


With that out of the way. Let's Start.

<hr>

From the [specification](https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#block-formatting):

> 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.

This is telling us that for an element to establish a block formatting context it has to be a floated element, absolutely positioned element or block containers that are not block boxes with the `overflow` property having a value other than `visible`.

Load the HTML file in your browser, you should get an output similar to the image below:

![Yellow boxes shown in Firefox web browser](https://thepracticaldev.s3.amazonaws.com/i/v6nkuylnfjesx8j94xgx.PNG)

From the image it's clear that everything is way out of order as the child elements are not contained in their parent element. The reason for this behavior is due to the height of the `parent` element currently set at `150px` and each child element has an height of `100px`:

```css
.parent {
  /* Other properties are the same */

  height: 150px; /* Note this */
}

.child {
  /* Other properties are the same */

  height: 100px; /* Note this */
}
```

This clearly means the parent `div` can only contain one child element (highlighted in red below) and the remaining child elements will not be accommodated. 

![](https://thepracticaldev.s3.amazonaws.com/i/8bf0qk95yioeq7ed26u1.PNG)

Now, remember that one of the conditions to establish a _Block Formatting Context_ is to position the element with `float` or absolute positioning. We'll be using the `float` property.

Add the following to the `.child` CSS rule:

```css
.child {
  /* All properties remain unchanged*/

  float: left; /* Add this */
}
```

Save the CSS file, and reload the HTML file in your browser, you should get an output similar to the image below:

![Floated element shown in the Firefox web browser](https://thepracticaldev.s3.amazonaws.com/i/tnehev3sk1u0azbndwjz.PNG)

Two additional divs are now accommodated in the parent container (highlighted in red).

The other condition to establish a _Block Formatting Context_ is to have the `overflow` property set to a value other than `visible`. The question is: _Where are we going to put the `overflow` property?_

From the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context)(emphasis mine):

> A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the __layout of block boxes occurs and in which floats interact with other elements__.

This means to satisfy the other condition that'll establish a _Block Formatting Context_, the boxes (the child elements) have to interact with each other inside their parent element.
 
Armed with this knowledge, the `overflow` property will have to be applied to the `parent` element because it contains the floated child elements.

Add the following to the `.parent` CSS rule:

```css
.parent {
  /* All other properties remain unchanged */

  overflow: auto; /* Add this */
}
```

Save the CSS file, and reload the HTML file in your browser. You should get something similar to the image below:

![Yellow boxes contained in their parent element](https://thepracticaldev.s3.amazonaws.com/i/7gf62l27z6nnx999p94b.PNG)

All child element are now contained in the parent `div` container and they are going nowhere (at least for now). 

If you take a closer look at the image, you will notice a scroll bar has been added by the browser, this will allow you to scroll the remaining child element into view.

_Right click_ on any child element, and choose “Inspect Element”, _click_ on the third child element in _Developer Tools_, you should get something similar to the image below

![Yellow boxes contained in their parent element](https://thepracticaldev.s3.amazonaws.com/i/zfj4h31h56ry5mzq7bgo.png)

This means this specific child element is still in its initial position (refer to the third image in this article), but it’s now contained in its parent container and __other content can be placed after the parent div container__.

To demonstrate the last statement, make a copy of the parent `div` and place it after the initial parent `div`.

Update your HTML code to match the following:

```html
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
```
Save the file and refresh in your browser, you should get something similar to the image below.

![Yellow boxes contained in their parent element](https://thepracticaldev.s3.amazonaws.com/i/dargcdj0l583fmgwopg5.PNG)

_Right click_ on the first parent `div` and _click_ "Inspect Element", _click_
 on the fourth child element, you should get something similar to the image below.

![Yellow boxes contained in their parent element](https://thepracticaldev.s3.amazonaws.com/i/vycldyl3bqwze86244bw.png)

It shows the fourth child element seems to be overlapping with the first child element of the second parent `div` but they are all contained in their parent due to the _Block Formatting Context_.

Now one question: _What happens if we switch off the Block Formatting Context_?

__Delete__ the `overflow: auto;` property from the `.parent` CSS rule.

Save the file and refresh your browser. All child element will go out of position.
 
![Yellow boxes contained in their parent element](https://thepracticaldev.s3.amazonaws.com/i/mxmwflb881co9lsuoyfk.PNG)

And if you __delete the float property__ in the child element CSS rule, it gets worse:

![Yellow boxes contained in their parent element](https://thepracticaldev.s3.amazonaws.com/i/7vxozevcp4rh7pk0qadt.PNG)

__Undo the last two changes to your file__, everyone plays nice again.

![Yellow boxes contained in their parent element](https://thepracticaldev.s3.amazonaws.com/i/dargcdj0l583fmgwopg5.PNG)

Knowing the _Block Formatting Context_ and how to create one will help you create specific layouts that you might come up with.

Speaking of layouts, we'll be discussing two layout algorithms in this series.

We'll start with _Flexbox_. Next.