Block Formatting Context (BFC)

Evaluate yourself with a quiz on the block formatting context of CSS and the creation of block formatting context in this lesson.

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%

Level up your interview prep. Join Educative to access 70+ hands-on prep courses.