Blok opmaakcontext

Deze vertaling is onvolledig. Help ons dit artikel te vertalen vanuit het Engels

Een blok opmaakcontext is een deel van de visuele CSS-weergave van een webpagina. Het is het gebied waar de layout van blokboxen gebeurd en waar floats omgaan met andere elementen. 


Een blok opmaakcontext wordt gecreeërd door tenminste:

  • the root element or something that contains it
  • floats (elements where float is not none)
  • absolutely positioned elements (elements where position is absolute or fixed)
  • inline-blocks (elements with display: inline-block)
  • table cells (elements with display: table-cell, which is the default for HTML table cells)
  • table captions (elements with display: table-caption, which is the default for HTML table captions)
  • anonymous table cells implicitly created by the elements with display: tabletable-rowtable-row-grouptable-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers and table footers, respectively), or inline-table 
  • block elements where overflow has a value other than visible
  • display: flow-root
  • elements with contain: layoutcontent, or strict
  • flex items (direct children of the element with display: flex or inline-flex)
  • grid items (direct children of the element with display: grid or inline-grid)
  • multicol containers (elements where column-count or column-width is not auto, including elements with column-count: 1)
  • column-span: all should always create a new formatting context, even when the column-span: all element isn't contained by a multicol container (Spec change, Chrome bug).

A block formatting context contains everything inside of the element creating it.

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of the content inside other block formatting contexts, and clear only clears past floats in the same block formatting context. Margin collapsing also occurs only between blocks that belong to the same block formatting context.


make float content and alongside content the same height

Let's have a look at a couple of these in order to see the effect creating a new BFC.

In the example below, we have a floated element inside a <div> with a border applied. The content of that <div> has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the <div> now runs through the float. As explained in the guide to in-flow and out of flow elements, the float has been taken out of flow so the background and border of the <div> only contain the content and not the float.

Creating a new BFC would contain the float. A typical way to do this in the past has been to set overflow: auto or set other values than the initial value of overflow: visible.

Setting  overflow: auto created a new BFC containing the float. Our <div> now becomes a mini-layout inside our layout. Any child element will be contained inside it.

The problem with using overflow to create a new BFC is that the overflow property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. If you do this, it would be a good idea to comment the code to explain.

margin collapsing

Creating a new BFC to avoid the margin collapsing between two neighbor div:


<div class="blue"></div>
<div class="red-outer">
  <div class="red-inner">red inner</div>


.blue, .red-inner {
  height: 50px;
  margin: 10px 0;

.blue {
  background: blue;

.red-outer {
  overflow: hidden;
  background: red;


Using display: flow-root

A newer value of display gives us the ability to create a new BFC without any other potentially problematic side-effects. Using display: flow-root on the containing block will create a new BFC .

With display: flow-root; on the <div>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.

The value name of flow-root makes sense when you understand you are creating something that acts like the root element (<html> element in browser) in terms of how it creates a new context for the flow layout inside it.

Note:  display: flow-root; is not supported by Safari.


See also