loading...

CSS Block Formatting Context

ziizium profile image Habdul Hazeez ・5 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer
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

We concluded the last post on CSS Floats 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.

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
.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 Firefox web browser and its Developer Tools.

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


From the specification:

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

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:

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

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:

.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

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(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:

.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

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

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:

<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

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

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

And if you delete the float property in the child element CSS rule, it gets worse:

Yellow boxes contained in their parent element

Undo the last two changes to your file, everyone plays nice again.

Yellow boxes contained in their parent element

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.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on Nov 18 '19 by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide
 

Gracias por tu aporte , muy útil para los que estamos descubriendo el mundo CSS. Saludos desde cmdx 🇲🇽