@@ -1030,20 +1030,37 @@ Appendix A: Glossary</h2>
1030
1030
lays out boxes according to the <a>flex layout</a> rules [[CSS3-FLEXBOX]] ,
1031
1031
whereas a <a>block formatting context</a>
1032
1032
lays out boxes according to the block-and-inline layout rules [[CSS2]] .
1033
+ Additionally, some types of [=formatting contexts=] interleave and co-exist:
1034
+ for example, an [=inline formatting context=] exists within
1035
+ and interacts with the [=block formatting context=]
1036
+ of the element that establishes it,
1037
+ and a [=ruby container=] overlays a [=ruby formatting context=]
1038
+ over the [=inline formatting context=] in which its [=ruby base container=] participates.
1033
1039
1034
- When a box establishes a <em> new</em> [=formatting context=]
1040
+ A box either establishes a new [=independent formatting context=]
1041
+ or continues the [=formatting context=] of its containing block.
1042
+ In some cases,
1043
+ it might additionally establish a new (non-independent) co-existing formatting context.
1044
+ Unless otherwise specified, however,
1045
+ establishing a new <a>formatting context</a>
1046
+ creates an <a>independent formatting context</a> .
1047
+ The type of formatting context established by the box
1048
+ is determined by its <a>inner display type</a> .
1049
+ E.g. a <a>grid container</a> establishes a new <a>grid formatting context</a> ,
1050
+ a <a>ruby container</a> establishes a new <a>ruby formatting context</a> ,
1051
+ and a <a>block container</a> can establish a new <a>block formatting context</a>
1052
+ and/or a new <a>inline formatting context</a> .
1053
+ See the 'display' property.
1054
+
1055
+ <dt> <dfn>independent formatting context</dfn>
1056
+ <dd>
1057
+ When a box establishes an independent formatting context
1035
1058
(whether that [=formatting context=] is of the same type as its parent or not),
1036
1059
it essentially creates a new, independent layout environment:
1037
1060
except through the sizing of the box itself,
1038
1061
the layout of its descendants is (generally)
1039
1062
not affected by the the rules and contents of
1040
1063
the [=formatting context=] outside the box, and vice versa.
1041
- However, certain types of [=formatting context=] interleave and co-exist:
1042
- for example, an [=inline formatting context=] exists within
1043
- and interacts with the [=block formatting context=]
1044
- of the element that establishes it,
1045
- and a [=ruby container=] overlays a [=ruby formatting context=]
1046
- over the [=inline formatting context=] in which its [=ruby base container=] participates.
1047
1064
1048
1065
<p class="example">
1049
1066
For example, in a <a>block formatting context</a> ,
@@ -1058,10 +1075,38 @@ Appendix A: Glossary</h2>
1058
1075
As another example, margins do not collapse across [=formatting context=] boundaries.
1059
1076
1060
1077
<p class="note">
1061
- Exclusions are able to affect content across [=formatting context=] boundaries.
1078
+ Exclusions are able to affect content across [=independent formatting context=] boundaries.
1062
1079
(At time of writing, they are the only layout feature that can.)
1063
1080
[[CSS3-EXCLUSIONS]]
1064
1081
1082
+ Certain properties can force a box to
1083
+ <dfn lt="establish an independent formatting context|
1084
+ establishes an independent formatting context|
1085
+ establishing an independent formatting context|
1086
+ established an independent formatting context">
1087
+ establish an independent formatting context</dfn>
1088
+ in cases where it wouldn't ordinarily.
1089
+ For example,
1090
+ making a box <a>out-of-flow</a>
1091
+ causes it to <a>blockify</a> as well as to [=establish an independent formatting context=] .
1092
+ As another example,
1093
+ certain values of the 'contain' property
1094
+ can cause a box to <a>establish an independent formatting context</a> .
1095
+ Turning a block into a <a>scroll container</a>
1096
+ will cause it to <a>establish an independent formatting context</a> ;
1097
+ however turning a <a>subgrid</a> into a <a>scroll container</a> will not--
1098
+ it continues to act as a subgrid,
1099
+ with its contents participating in the layout of its parent <a>grid container</a> .
1100
+
1101
+ A [=block box=] that [=establishes an independent formatting context=]
1102
+ establishes a new [=block formatting context=] for its contents.
1103
+ In most other cases,
1104
+ forcing a box to [=establish an independent formatting context=] is a no-op--
1105
+ either the box already establishes an <a>independent formatting context</a>
1106
+ (e.g. <a>flex containers</a> ),
1107
+ or it's not possible to establish a totally independent new formatting context on that type of box
1108
+ (e.g. non-replaced <a>inline boxes</a> ).
1109
+
1065
1110
<dt> <dfn>block formatting context</dfn>
1066
1111
<dt> <dfn>inline formatting context</dfn>
1067
1112
<dd>
@@ -1259,6 +1304,11 @@ Appendix C: Box Construction Guidelines for Spec Authors</h2>
1259
1304
can't directly contain <a>block-level</a> boxes;
1260
1305
any boxes generated within such an element
1261
1306
must be <a>inline-level</a> .
1307
+ * Boxes that fundamentally cannot establish an [=independent formatting context=]
1308
+ (such as non-replaced inlines)
1309
+ must not be asked to [=establish an independent formatting context=] .
1310
+ Blockify them first,
1311
+ or otherwise change their box type to one that can establish an [=independent formatting context=] .
1262
1312
1263
1313
<h2 class=no-num id="acknowledgments">
1264
1314
Acknowledgments</h2>
@@ -1340,7 +1390,7 @@ Changes</h2>
1340
1390
* Clarified interaction of various box tree fixups.
1341
1391
(<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-38">Issue 38</a> ,
1342
1392
<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-48">Issue 48</a> )
1343
- * Added the definition of <a> becoming a formatting context</a> .
1393
+ * Added the definition of “ becoming a formatting context” .
1344
1394
* Miscellaneous minor fixes and minor clarifications.
1345
1395
1346
1396
A <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017">Disposition of Comments</a> is also available.
0 commit comments