Article: Understanding Block Formatting Contexts in CSS

HTML & CSS
1

Extract from SitePoint article “Understanding Block Formatting Contexts in CSS” by Ritesh Kumar

Published June 30, 2015

A Block Formatting Context is part of the visual CSS rendering of a web page in which block boxes are laid out. The positioning scheme to which it belongs is normal flow. According to W3C:

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.

The above quote pretty much sums up how a block formatting context is formed. But lets redefine it in a way that is easier to understand. A block formatting context is an HTML box that satisfies at least one of the following conditions:

  • The value of float is not none
  • The value of position is neither static nor relative
  • The value of display is table-cell, table-caption, inline-block,
    flex, or inline-flex
  • The value of overflow is not visible.

A block formatting context can be explicitly triggered. So if we want to create a new block formatting context, we just need to add any one of the above mentioned CSS conditions to it.

Continue reading article on SitePoint …

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.