Q15: What is a Block Formatting Context (BFC) and how is one created?
A Block Formatting Context (BFC) is an isolated visual CSS rendering region where block boxes are laid out. BFCs contain internal floats, prevent margin collapsing with descendants, and prevent text wrapping around floats. Created via display: flow-root, overflow: hidden, display: flex, or grid.
BFC via display: flow-root
.container {
/* Modern, side-effect free BFC creation */
display: flow-root;
/* Contains internal float elements cleanly */
}💡 display: flow-root establishes a BFC that safely encloses float elements.
Key Takeaways
- Isolates visual element layout rules from external document context.
display: flow-rootis the modern CSS standard for creating a clean BFC.
Knowledge Check
Which property creates a clean Block Formatting Context without layout side-effects?