What Happens in a BFC, Stays in a BFC!
The Block Formatting Context (BFC) in CSS is a concept that many developers can’t name or describe, but know all about. In this post I’ll briefly outline what a BFC is, the problems that they solve and how to create one.
What is a BFC?
A BFC is a region implicitly (or sometimes explicitly) applied to an element, so that this parent element will contain all children elements, i.e. the parent element is the origin of the BFC, and interactions and behaviours of children elements alter as a side-effect of this.
But seriously, what is a BFC?
A good metaphor of a BFC is that it’s a protective parent that doesn’t allow any of its children to go outside of its 4 walls (if you were to think of the box-model, the 4 walls are the borders).
This is done by 3 means:
- Containing floats
- Preventing text wrap around outside elements
- Preventing the collapse of margins with the margins of outside elements
Example 1 shows a text element and a floated element inside an outer element without a fixed height. When there is not enough text to surpass the height of the floated element, the outer element doesn’t respect the height of the floated element in the same way that it respects the height of the text element. Due to this, the floated element ends up spilling out of the outer element.
(Note: This issue has commonly been approached by applying a hack known as the clearfix. This works by inserting an element at the bottom of the outer element that clears the floated element. Though this arguably was never a very good approach.)
In Example 2, a BFC has been applied to the outer element so that it now contains the floated element.
Prevents text wrap
Example 3 shows that when there is enough text, the text element will wrap around the floated element. Notice also how the outer element wraps around the text, no matter how long the text runs (unlike the floated element in Example 1)
In Example 4, a BFC has been applied to the text element so that it no longer wraps around the floated element.
Prevents collapsing of margins
Example 5 shows a series of text elements (blue) within an outer element (grey). The outer element and all text elements have top and bottom margins. However we can see that the top margin of the first text element and the bottom margin of the last text element collapses with the margins of the outer element.
In Example 6, with a BFC applied to the outer element, the margins of the first and last text elements no longer collapse.
How do you create a BFC?
A BFC can be created, as a a side effect, by applying:
- A float property of left or right
- Absolute or fixed positioning
- A display property of inline-block
- A display property of grid or inline-grid (the BFC applies to the grid items contained within this element)
- A display property of flex or inline-flex (the BFC applies to the flex items contained within this element)
- A display property of table, table-row, table-row-group, table cell, table caption, table-header-group, table-footer-group or inline-table.
- An overflow property of anything other than visible on a block element
- A contain property of layout, content, or strict
You could also apply a display property of flow-root. Though browser support is still limited, the sole purpose of this property is to create a BFC.
There are many issues that occur in CSS that, through iteration, you acquire knowledge on how to solve. But it’s quite interesting that, whilst problems are solved, it’s not always fully understood why the problems are caused or how the solution actually solves it.
For Block Formatting Contexts it could simply be put, that what happens in a BFC stays in a BFC.