What is Block Formatting Context (BFC) in CSS

Cyrus Yip
Sep 22, 2024

Block Formatting Context (BFC) is a mini layout in the page. When an element establishes a BFC, it:

includes internal floated elements
exclude external floated elements
suppresses margin collapsing

A BFC is created in many situations, see Block formatting context - CSS: Cascading Style Sheets | MDN. The simplest way to create a BFC is display: flow-root.

Here is an example of excluding external floated elements (live preview):

1
2
3
4
5
6
7
8
9
<div class="container">
  <div class="float">I am floated element.</div>
  <div class="content">I am content inside the container. I include the floated element.</div>
</div>
<hr>
<div class="container">
  <div class="float">I am floated element.</div>
  <div class="content flow-root">I am content inside the container. I have a BFC. I exclude the floated elements.</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
.float {
  float: left;
  border: 5px solid green;
}

.content {
  border: 5px solid blue;
}

.container {
  border: 5px solid red;
}

.content.flow-root {
  display: flow-root;
}