When I read the CSS Visual formatting specification, I see that
Boxes in the normal flow belong to a formatting context, which in CSS 2.2 may be table, block or inline. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
But not all boxes create a Block Formatting Context. Where in the docs does it describe the normal flow for boxes that don't create a BFC, and if they don't create one, what formatting context applies?
.container {
background-color: red;
/*overflow: hidden; !* creates a block formatting context *!*/
}
p {
background-color: lightgreen;
margin: 10px 0;
}
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
</div>
See Question&Answers more detail:os