Does overflow create a new block formatting context (BFC)?

Q: Does overflow create a new block formatting context (BFC)?

Yes, setting a non-visible overflow value (`hidden`, `auto`, or `scroll`) on a block-level element causes it to establish a new Block Formatting Context (BFC). A BFC is an isolated layout region that prevents elements inside it from affecting elements outside it in certain ways. A BFC prevents **margin collapsing** between its contents and outside elements. Floats are **contained** within the element, preventing them from overflowing their parent container. Child elements inside a BFC do not overlap with floats outside the container. Setting `overflow: visible` does *not* create a new BFC. .container { border: 2px solid #000; overflow: hidden; /* creates a new BFC */ } .floated { float: left; width: 100px; height: 100px; background: lightcoral; } .content { background: lightblue; margin-top: 20px; } This content respects the BFC boundaries and does not collapse with the float.

Difficulty: 5/10

overflow, block formatting context, layout

Overflow and block formatting context (BFC)

Yes, setting a non-visible overflow value (hidden, auto, or scroll) on a block-level element causes it to establish a new Block Formatting Context (BFC). A BFC is an isolated layout region that prevents elements inside it from affecting elements outside it in certain ways.

Key Effects of BFC Created by Overflow

1
A BFC prevents margin collapsing between its contents and outside elements.
2
Floats are contained within the element, preventing them from overflowing their parent container.
3
Child elements inside a BFC do not overlap with floats outside the container.
4
Setting overflow: visible does not create a new BFC.

Example: Overflow Creating a New BFC

Scenario Questions

0-2 years experience

2-5 years experience

1While debugging a page, you notice that a footer is overlapping a floated element above it. Changing the footer’s overflow to auto fixes the issue. Explain why that works.

Follow-up Questions