Skip to content

Commit 3611d78

Browse files
committed
[css-display] Rewrite formatting context definition, correct some errors. ('flow' can sometimes establish a new formatting context, <display-internal> never establishes a new formatting context, exclusions can affect content across FC boundaries)
1 parent 948c1f7 commit 3611d78

1 file changed

Lines changed: 27 additions & 11 deletions

File tree

css-display/Overview.bs

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -741,23 +741,39 @@ Appendix A: Glossary</h2>
741741

742742
<dt><dfn>formatting context</dfn>
743743
<dd>
744-
A <a>formatting context</a> is an independent "unit" of layout.
745-
When a box establishes a <a>formatting context</a>,
746-
the layout of its descendants are not affected by any outside boxes,
747-
and vice versa.
744+
A <a>formatting context</a> is the environment
745+
into which a set of related boxes are laid out.
746+
Different formatting contexts lay out their boxes
747+
according to different rules.
748+
For example, a <a>flex formatting context</a>
749+
lays out boxes according to the <a>flex layout</a> rules [[CSS3-FLEXBOX]],
750+
whereas a <a>block formatting context</a>
751+
lays out boxes according to the block-and-inline layout rules [[CSS21]].
752+
753+
When a box establishes a <em>new</em> formatting context
754+
(whether that formatting context is of the same type as its parent or not),
755+
it essentially creates a new, independent layout environment:
756+
except through the sizing of the box itself,
757+
the layout of its descendants is (generally)
758+
not affected by the the rules and contents of
759+
the formatting context outside the box, and vice versa.
748760

749761
<p class="example">
750-
For example, when used among other ''flow'' boxes,
762+
For example, in a <a>block formatting context</a>,
751763
floated boxes affect the layout of surrounding boxes.
752764
But their effects do not escape their <a>formatting context</a>:
753765
the box establishing their <a>formatting context</a> grows to fully contain them,
754-
and any other <a>formatting contexts</a> near them
755-
shrink or move to avoid having the float overlap them.
766+
and floats from outside that box
767+
are not allowed to protrude into and affect the contents
768+
inside the box.
756769

757-
Most <a>inner display types</a> establish formatting contexts automatically.
758-
The ''flow'' layout mode is a notable exception,
759-
with a choice between establishing a formatting context or not,
760-
via the ''flow-root'' and ''flow'' 'display' values.
770+
<p class="example">
771+
As another example, margins do not collapse across formatting context boundaries.
772+
773+
<p class="note">
774+
Exclusions are able to affect content across formatting context boundaries.
775+
(At time of writing, they are the layout feature that can.)
776+
[[CSS3-EXCLUSIONS]]
761777

762778
<dt><dfn>block formatting context</dfn>
763779
<dt><dfn>inline formatting context</dfn>

0 commit comments

Comments
 (0)