Block Formatting Context (BFC)

What is a block formatting context?

A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with overflow other than visible establish new block formatting contexts.

A BFC is an HTML box that satisfies at least one of the following conditions:

• The value of float is not none
• The value of position is neither static nor relative
• The value of display is table-cell, table-caption, or inline-block
• The value of overflow is not visible
• In a BFC, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch)

Creating a block formatting context using the display property

Suppose we have an element floated on the left side of a div. The left floated element is in a steelblue color and the div is in the coral background color. The text is wrapping around the box. Currently, there is no block formatting context.

#box {
  float: left;
  width: 50px;
  height: 50px;
  background: steelblue;
}

div {
  border: 3px solid black;
  background: coral;
  width: 50%
}