1. Float containment

A parent with only floated children collapses to zero height, because floats are taken out of normal flow. Creating a Block Formatting Context on the parent (with display: flow-root) makes it wrap its floats again.

See how the dashed border collapsed to a thin strip? The floats escaped the parent's height.

.parent {
  /* no BFC: height collapses around floats */
}

2. Margin collapse

Two stacked boxes with 40px margins get only a 40px gap, not 80px: adjoining vertical margins collapse. Wrap one box in its own BFC and the margins stop collapsing, giving the full 80px.

Without the wrapper, 40px + 40px collapses to a single 40px gap. Measure it to confirm.

3. Float exclusion zone

Text in normal flow wraps around floats. Put the text in its own BFC and it forms a neat column beside the float instead of flowing underneath it.

.text {
  display: flow-root; /* BFC: no float intrusion */
}

/* other ways to create a BFC: */
/* overflow: hidden | auto; display: inline-block; */
/* position: absolute | fixed; contain: layout; */