Read more

Block formatting contexts

Dominik Schöler
February 18, 2015Software engineer at makandra GmbH

TL;DR Block formatting contexts establish an isolating container. float
and clear only apply to elements within such a container.

About

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

Block formatting contexts (BFCs) are important for the positioning and clearing
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 things in other block formatting contexts,
and clear only clears past floats in the same block formatting context.

How to create a new block formatting context

A block formatting context is created by one of the following:

Example: A fluid main area with a right sidebar

In a two-column layout you don't want either column to clear content of the other. Float the sidebar to the right and you're set: its content now renders in the sidebar's own block formatting context.

However, a clear: <both|right> in the main area still clears the sidebar, which is undesirable. You need to give the sidebar an own BFC. Since there is no actual "command" to create one, you need to hack it.

Below see a list of issues and side effects with BFC-creating properties on the main area.

Best solution: overflow: hidden

This is the only reliably working property, use it whenever you can. Caution: This will literally cut off any content that leaves the container. You must not specify a height on the main area so it can stretch as needed. If any content ever needs to overlap the main area's borders, try adding padding (no pun intended).

float
: Floating elements are taken out of their surrounding context, which is why a floating main area would not "know" about the location of the sidebar. Thus, it cannot responsively stretch to the sidebar's left edge. Bad.

position: <absolute|fixed>
: This is worse than floating. The main area will now grow out of its container and overlap e.g. the footer.

display: inline-block
: Again, an inline element will not stretch to the available width.

display: <table|table-cell>
: Tables also don't stretch to the available width. Adding width: 100% will ignore the margin, making the main area "float" below the floating sidebar.

Posted by Dominik Schöler to makandra dev (2015-02-18 11:44)