Block Formatting Context (BFC)
Explore Block Formatting Context to understand how CSS controls the layout of block-level elements. This lesson explains conditions that establish BFC and demonstrates how display properties like table-cell and inline-block trigger BFC to prevent text wrapping and manage layout flow effectively.
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