Revision 363039 of Block formatting context

  • Revision slug: CSS/Block_formatting_context
  • Revision title: Block formatting context
  • Revision id: 363039
  • Created:
  • Creator: Biesi
  • Is current revision? No
  • Comment flex boxes also establish formatting contexts: http://dev.w3.org/csswg/css3-flexbox/#flex-items

Revision Content

{{ CSSRef() }}

Summary

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

A block formatting context is created by one of the following:

  • the root element or something that contains it
  • floats (elements where {{ cssxref("float") }} is not none)
  • absolutely positioned elements (elements where {{ cssxref("position") }} is absolute or fixed)
  • inline-blocks (elements with {{ cssxref("display") }}: inline-block)
  • table cells (elements with {{ cssxref("display") }}: table-cell, which is the default for HTML table cells)
  • table captions (elements with {{ cssxref("display") }}: table-caption, which is the default for HTML table captions)
  • elements where {{ cssxref("overflow") }} has a value other than visible
  • flex boxes (elements with {{ cssxref("display") }}: flex or inline-flex)

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

Block formatting contexts are important for the positioning (see {{ cssxref("float") }}) and clearing (see {{ cssxref("clear") }}) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

Specifications

See Also

  • {{ cssxref("float") }}, {{ cssxref("clear") }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p>A <b>block formatting context</b> is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.</p>
<p>A block formatting context is created by one of the following:</p>
<ul>
  <li>the root element or something that contains it</li>
  <li>floats (elements where<code> </code>{{ cssxref("float") }} is not <code>none</code>)</li>
  <li>absolutely positioned elements (elements where {{ cssxref("position") }} is <code>absolute</code> or <code>fixed</code>)</li>
  <li>inline-blocks (elements with {{ cssxref("display") }}<code>: inline-block</code>)</li>
  <li>table cells (elements with {{ cssxref("display") }}<code>: table-cell</code>, which is the default for HTML table cells)</li>
  <li>table captions (elements with {{ cssxref("display") }}<code>: table-caption</code>, which is the default for HTML table captions)</li>
  <li>elements where {{ cssxref("overflow") }} has a value other than <code>visible</code></li>
  <li>flex boxes (elements&nbsp;with {{ cssxref("display") }}<code>: flex</code> or <code>inline-flex</code>)</li>
</ul>
<p>A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.</p>
<p>Block formatting contexts are important for the positioning (see {{ cssxref("float") }}) and clearing (see {{ cssxref("clear") }}) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.</p>
<h3 id="Specifications" name="Specifications">Specifications</h3>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#q15">CSS 2.1</a></li>
</ul>
<h3 id="See_Also" name="See_Also">See Also</h3>
<ul>
  <li>{{ cssxref("float") }}, {{ cssxref("clear") }}</li>
</ul>
Revert to this revision