Skip to content

Commit 6b27890

Browse files
fantasaifantasai
committed
[css-contain-3] Merge two versions of the float placement example and illustrate it. w3c#6426 
1 parent 23b0235 commit 6b27890

File tree

1 file changed

+95
-66
lines changed

1 file changed

+95
-66
lines changed

‎css-contain-3/Overview.bs‎

Lines changed: 95 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -148,72 +148,101 @@ Inline-Size Containment</h3>
148148
please <a href="https://github.com/w3c/csswg-drafts/issues">inform the CSSWG</a>
149149
so that these errors can be corrected.
150150

151-
<div class=example>
152-
For example,
153-
the following <code>article</code> is constrained by both
154-
the overall <code>section</code> '/width',
155-
and impacted by the floated <code>div</code>s.
156-
157-
<xmp class=lang-markup>
158-
<section style="width: 200px; border: solid; display: flow-root;">
159-
<!-- floated elements that impact the available space -->
160-
<div style="float: left; width: 50px; height: 80px; background: red;"></div>
161-
<div style="float: right; width: 50px; height: 80px; background: red;"></div>
162-
<div style="float: left; width: 160px; height: 80px; background: red;"></div>
163-
164-
<!-- parent layout, determining context -->
165-
<article style="border: solid; display: flow-root;">
166-
<div style="background: orange; aspect-ratio: 1/1;">
167-
text
168-
</div>
169-
</article>
170-
</section>
171-
</xmp>
172-
173-
The block layout algorithm will first place the floating elements,
174-
with the first two sitting in the left and right corners of the container,
175-
and the third being pushed below them,
176-
since its width does not fit in the remaining space
177-
if it was placed with its top edge flush with the top of the container.
178-
179-
The following <code>article</code> will then be laid out.
180-
Because it is ''display: flow-root'',
181-
it avoids intersecting with any floats,
182-
and thus must take them into account
183-
when figuring out how to size and position itself.
184-
185-
The layout engine first attempts to put the <code>article</code> flush with the top of the container,
186-
as there is enough inline space to accommodate its [=min-content size=];
187-
resulting in it becoming ''100px'' wide.
188-
However, due the aspect ratio of its contents,
189-
this would cause the <code>article</code> to be ''100px'' tall as well,
190-
but there is only ''80px'' of available block space
191-
before it would intersect the third float,
192-
so this layout opportunity is discarded.
193-
194-
It then attempts to position the <code>article</code>
195-
flush with the top of the third float,
196-
in the narrow ''40px''-wide space to its right.
197-
It fits, and its resulting ''40px'' height
198-
doesn't violate any layout rules either,
199-
so this is acceptable.
200-
201-
At this point, the width and height of the <code>article</code>
202-
(''40px'' each)
203-
<em>would</em> fit back in the original considered space,
204-
flush with the top of the container.
205-
However, "progress" along the block axis
206-
when considering layout opportunities
207-
is one such "ratchet" in layout,
208-
and an element is not allowed to return to a higher position
209-
after it determines its size.
210-
211-
Thus, the <code>article</code> is sized to ''40px'' wide and tall
212-
and positioned alongside the third float,
213-
even tho a similar element with an <em>explicit</em> <css>width: 40px</css>
214-
would be positioned at the top of the container,
215-
between the first two floats.
216-
</div>
151+
<div class=example>
152+
Consider this example,
153+
where float placement creates a dependency of block sizes on inline sizes:
154+
155+
<xmp class=lang-markup>
156+
<section style="width: 200px; border: solid; display: flow-root;">
157+
<!-- floated elements that impact the available space -->
158+
<div style="float: left; width: 50px; height: 80px; background: blue;"></div>
159+
<div style="float: right; width: 50px; height: 80px; background: blue;"></div>
160+
<div style="float: left; width: 160px; height: 80px; background: navy;"></div>
161+
162+
<!-- parent layout, determining context -->
163+
<article style="border: solid orangered; display: flow-root; min-width: min-content">
164+
<div style="background: orange; aspect-ratio: 1/1;">
165+
Article
166+
</div>
167+
</article>
168+
</section>
169+
</xmp>
170+
171+
<figure style="float: left; margin: 1em 0.5em">
172+
<section style="width: 200px; border: solid; display: flow-root;">
173+
<!-- floated elements that impact the available space -->
174+
<div style="float: left; width: 50px; height: 80px; background: blue;"></div>
175+
<div style="float: right; width: 50px; height: 80px; background: blue;"></div>
176+
<div style="float: left; width: 160px; height: 80px; background: navy;"></div>
177+
178+
<!-- parent layout, determining context -->
179+
<article style="border: solid orangered; display: flow-root; min-width: 50px">
180+
<div style="background: orange; aspect-ratio: 1/1;">
181+
Article
182+
</div>
183+
</article>
184+
</section>
185+
</figure>
186+
187+
The block layout algorithm will first place the floating boxes,
188+
with the first two sitting in the left and right corners of the container,
189+
and the third, being too wide to fit between, being pushed below them.
190+
191+
The following <code>article</code> will then be laid out.
192+
Because it is ''display: flow-root'',
193+
it cannot intersect any floats,
194+
and thus must take them into account
195+
when figuring out how to size and position itself.
196+
197+
The layout engine first attempts to place the <code>article</code>
198+
flush with the top of the container,
199+
resulting a ''100px'' width,
200+
plenty wide enough to accommodate its [=min-content size=].
201+
However, due the 'aspect-ratio' of its child,
202+
this would cause the <code>article</code> to be ''100px'' tall as well,
203+
which would intersect the third float 80px below,
204+
so this layout opportunity is discarded.
205+
206+
It then attempts to position the <code>article</code>
207+
flush with the top of the third float,
208+
in the narrow ''40px''-wide space to its right.
209+
However, since the <code>article</code>’s 'min-width' makes it too large
210+
to fit in the 40px-wide space beside the third float,
211+
it shifts below that one as well,
212+
forming a 200px square below all the floated boxes.
213+
214+
<figure style="float: right; margin: 1em 0.5em">
215+
<section style="width: 200px; border: solid; display: flow-root;">
216+
<!-- floated elements that impact the available space -->
217+
<div style="float: left; width: 50px; height: 80px; background: blue;"></div>
218+
<div style="float: right; width: 50px; height: 80px; background: blue;"></div>
219+
<div style="float: left; width: 160px; height: 80px; background: navy;"></div>
220+
221+
<!-- parent layout, determining context -->
222+
<article style="border: solid orangeread; display: flow-root;">
223+
<div style="background: orange; aspect-ratio: 1/1;">
224+
Article
225+
</div>
226+
</article>
227+
</section>
228+
</figure>
229+
230+
If the 'min-width' is removed from the <code>article</code>,
231+
or if [=inline-size containment=] is added to
232+
either the <code>article</code> or <code>header</code>
233+
(causing ''min-width: min-content'' to resolve to zero),
234+
then the <code>article</code> will fit as a 40px square
235+
next to the final floated <code>div</code>
236+
(possibly with some of its content overflowing).
237+
238+
At this point, the width and height of the <code>article</code>
239+
(''40px'' each)
240+
<em>would</em> fit back in the first considered space,
241+
flush with the top of the container.
242+
However, the box is not returned to the previous position,
243+
because the layout engine knows already
244+
that this position would result in an invalid layout.
245+
</div>
217246

218247
However, giving an element [=inline-size containment=]
219248
has no effect if any of the following are true:

0 commit comments

Comments
 (0)