Question

How does the CSS Block Formatting Context work?

CSS2.1 specifications say that in a block formatting context, boxes are laid out vertically, starting at the top. This happens even if there are floated elements in the way, except if the block box established a new block formatting context. As we know, when browsers render block boxes in a block formatting context, the floated element is omitted, why does establishing a new block formatting context work?

How are boxes (block boxes and inline boxes) laid out in the normal flow?

I read somewhere that block elements generate block boxes, but floating elements are ignored when a user agent draws a box and take them into account when they fill out the content. Whilst floating elements will overlap other elements' boundaries of the boxes, the solution is establishing a new block formatting context for the overlapped elements using overflow: hidden.

"New block formatting context is still block formatting", so when drawing a box, it will also treat the floating element as if it doesn't exist. Is that right or have I misunderstood "new block formatting context?"