Welcome to OGeek Q&A 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 Reply

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".


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...