What does a block formatting context actually do?

meg hidey 0
Viewed 54

To preface, I understand how to create a BFC, I am confused on what a BFC actually does.

MDN says that

Elements participating in a BFC use the rules outlined by the CSS Box Model

and the spec says that

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

MDN gives the example of a floated div that is out of flow, its height independent from the box parent.

<div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
</div>

.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    /* overflow: hidden; */
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}

And then having the box container ending up filling the height of the floated div. once overflow:hidden is declared which creates a BFC.

.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: hidden;
}

How does participating in a BFC end up with this outcome? My thought process:

  • According to MDN's definition, participating in a BFC makes an element adhere to the box model...but don't all elements, even a floated element, adhere to the box model?
  • According to the spec's definition, all boxes are laid out vertically, but my-floated div and the p tag are side by side.
  • It seems that a BFC just makes the container fit all elements participating in its BFC, but if this is the case, then how come using a position: absolute instead of a float: left doesn't provide the same outcome of making the container fit the absolutely positioned element?

e.g.

<div class="box">
    <div class="abs">I am an absolutely positioned box!</div>
    <p>I am content inside the container.</p>
</div>

.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: auto;
    position: relative;
    height: 50px;
}

.abs {
    position: absolute;
    top: 250px;
    left: 100px;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}

Could someone explain what the BFC actually does?

css html
2 Answers

A BFC is a kind of "isolation" to avoid any interaction of the inside and the outside world of an element. From another part of the MDN you can read:

because an element that establishes a new block formatting context will:

  • contain internal floats.
  • exclude external floats.
  • suppress margin collapsing.

Most of the observation you made (box model, absolute, boxes) aren't related to BFC. Just consider the creation of BFC as a way to encapsulate elements inside (mainly float elements because all the other elements are by default "inside"). Of course, this doesn't apply to absolute/fixed elements because they have their own rule that make them out of the flow.

Temani Afif0

Formatting contexts in general establish a set of rules for the layout of their contents.

The rules for Block formatting contexts are that their in-flow contents are laid out vertically one after the other.

In addition, BFCs have a few side-effects, that exist largely to make the rules established for their contents implementable, such as the way they work in the presence of floats inside or next to them.

Taking your points one by one,

  • According to MDN's definition, participating in a BFC makes an element adhere to the box model...but don't all elements, even a floated element, adhere to the box model?

Yes they do. MDN does not actual say that it makes them adhere, just that they do adhere. The MDN statement is rather redundant, but not harmful or incorrect.

  • According to the spec's definition, all boxes are laid out vertically, but my right-floating div and the p tag are side by side.

This is incorrect. The floating div overlaps the p element. Only the inline content of the p element is side by side with the floating div.

  • It seems that a BFC just makes the container fit all elements participating in its BFC, but if this is the case, then how come using a position: absolute instead of a float: left doesn't provide the same outcome of making the container fit the absolutely
    positioned element?

As said above, that BFCs contain their floats is best regarded as a side-effect of the BFC, not really what it does.

Finally, although BFCs provide some isolation of their contents from the outside world, it is not complete. For example, inline-block elements establish BFCs for their contents, but their baselines escape this isolation and are used to vertically align the elements with their inline neighbours.

Alohci0
Related