Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

html - What formatting context applies to elements that don't create their own?

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Put simply, every block sits in a formatting context. Blocks that have no special properties (e.g. divs with no extra CSS attached) all sit in their parent's formatting context.

Only when a block has properties like position, float, opacity etc., does a new formatting context get created for the block and its contents.

And to answer your question what's it called when a block does not create a BFC of its own, that's simply what the W3C page calls "normal flow".


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...