CODEWITHSUNDEEP
htmlcssw3c
yaway
yaway

Reputation: 21

What is the initial containing block and does it establish a block formatting context?

The standard Collapsing margins says

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context

...

Here is a demo: http://jsfiddle.net/yaway/Pz4QZ/

html

<div class="box-a bfc">drei</div>
<div class="box-b bfc">vier</div>

css

* {
    margin:0;
    padding:0
}
.box-a,
.box-b {
    height:100px;
    margin:10px 0;
    border:1px solid #fff;
}
.box-a {
    background-color:#fee
}
.box-b {
    background-color:#efe
}
.bfc {
    overflow:hidden;
}

The box "drei" and "vier" have collapsing margins

So I wonder if the initial containing block establishes a block formatting context(BFC),so these two boxes are in the same BFC.

But I failed to find that in W3C.

Upvotes: 0

Views: 705

Answers (1)

Quentin
Quentin

Reputation: 943157

The initial containing block is defined as:

The containing block in which the root element lives is a rectangle called the initial containing block.

i.e. It contains the <html> element for an HTML document.

It does establish a block formatting context, but the two elements in your example can't be children of it so there might be something else establishing a new block formatting context first.

I can't think of any circumstance where two display: block, float: none, position: static adjacent siblings won't share a block formatting context though.

Upvotes: 0

Related Questions