CODEWITHSUNDEEP
css
Mostafizur Rahman
Mostafizur Rahman

Reputation: 241

What exactly is a formatting context?

From MDN:

Everything on a page is part of a formatting context, or an area which has been defined to lay out content in a particular way.

So, according to MDN, formatting context is an area. But it's not clear what they mean by "area". What does "area" mean here?

Also from MDN:

A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.

What does being a part of a visual CSS rendering of a web page for an element mean here? It says, it's a region, coinciding with area from the above excerpt. Then it says, BFC is a region—I suppose, they mean a visual region or area of the viewport—where the layout (the visual organization of html elements) happens.

"An element establishes a formatting context" is a very common phrase used throughout many CSS tutorials. display: flow-root establishes a BFC.

.box {
  background-color: #ddd;
  padding: 1em;
}

.box-1 {
  background-color: brown;
  width: 7em;
  height: 7em;
}

.box-2 {
  background-color: cadetblue;
  width: 7em;
  height: 7em;
}

.para {
  background-color: yellowgreen;
}
<div class="box">
  <div class="box-1"></div>

  <p class="para">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquam nisi necessitatibus consequuntur ducimus dolor maxime cumque repellat? Explicabo dolore deleniti aut sequi assumenda dolor ex deserunt, blanditiis itaque eum.
  </p>

  <div class="box-2"></div>
</div>

Here, the .box element, along with all its contents, is a part of the initial block formatting context—this is what MDN and other tutorials say. Now, if I add the CSS declaration display: flow-root to .box, the .box element will establish a new BFC and then all of its contents will be parts of that newly established BFC, or will participate in that BFC. And, since, according to MDN, BFC is an area or a region of the viewport where the layout "lives" (occurs), the viewport region—perhaps the area of the padding box of the element—that the .box parent element occupies must be the BFC it establishes.

Am I right? Could you make it more clear?

Upvotes: 5

Views: 573

Answers (1)

Alohci
Alohci

Reputation: 82976

A formatting context is not really an area. It's more a state of a box that defines the set of layout rules that apply to itself and its participant boxes.

Upvotes: 3

Related Questions