CSS: Block formatting context

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.

~ W3C, CSS 2.1

Confusing? I at least thought so, but it’s actually quite simple when explained. The block formatting context is part of the visual CSS rendering of a web page. It affects the layout by changing how the contained elements float and clear.

I’ll give a few examples cases where this may come in handy and how to use it, but before that; here is a list cases which triggers a new block formatting context.

  • float other than none
  • position fixed or absolute
  • 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)
  • overflow other than visible
  • flex boxes (elements with display: flex or inline-flex)

Important note: even though any one of the above will create a new block formatting context they may have some sideeffects that you don’t want. In other words float: left and display: table-cell both create block formatting contexts, but they don’t behave in the same way..

Case #1: Prevent text wrapping

There are cases where it’s desireable to prevent the text from wrapping around some floated element. This could for be a left or right column, an image or something else. We’ve got the following code:

HTML

 

floated

 

Lorem impsum [..]

 

CSS

It results in the floated div to be floated left, and the .content div wraps around. One way to do it would be to set a left margin on the content div that’s as wide as the floated element, but this requires to know the width of the floated div, and to specify it twice.

Instead we’ll create a new block formatting context. In this example we will use the overflow: hidden property, but you could just as well use display: table-cell + width: 10000px (the width is to prevent the cell from shrink wrapping to the content of the div), display: flex or overflow: auto.

Below you can see the effect of adding the overflow: hidden property – the text no longer wraps.

1 2
Without block formatting context After creating block formatting context

Case #2 – Multi column layout

A common problem encountered in many projects is when you have a multi column layout where you have for instance three columns side by side and want to fill the full width of the container.

In my experience this works just great until you start to cross browser test and usually in one of the browsers the last box has fallen down below the others. This is usually caused by the browsing rounding the box width up and the total width being larger than the container width.

Block formatting context to the rescue!

HTML

 

 

Stuff inside

 

 

 

Stuff inside

 

 

 

Stuff inside

 

 

CSS

This way, the last column will allways take up the rest of the space, no matter how many columns you’re dividing the space on. Even if it’s a little beside the point, it’s worth mentioning that the :last-child pseudo class i not supported before IE8, so if you’re catering for older versions than that you would have to find a solution for that..

Case #3 – Clearfix

I’m assuming you’ve encountered the problem with a container holding floated elements not being as tall as it’s content. This can be fixed in a clean way by letting the container create a new block formatting context.

HTML

 

floated

 

floated

 

CSS

To the left you can see the container without the clearfix. In the image to the right we’ve added overflow: hidden to the container in order to block it out.

3 4
Without block formatting context After creating block formatting context

I would argue that this is the cleanest way to block out elements as you don’t have to add pseudo elements to the DOM and because it’s acutually in the spec too;

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.

~ W3C, CSS 2.1

Read more from the Software engineering category
SUBSCRIBE TO OUR UPDATES
Menu