Skip to content

[css-page-floats] Add explanations on interactions between page floats and variable height float references #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
johanneswilm merged 1 commit into from
May 21, 2015
Merged

[css-page-floats] Add explanations on interactions between page floats and variable height float references #24

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
237 changes: 138 additions & 99 deletions css-page-floats/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ Ignored Terms: near, 3em, intrude, top-corner, bottom-corner, left, right, both,

<h2 id="overview">Overview</h2>

<em>This section is not normative.</em>

This specification adds new keywords on the 'float' property.

This document allows to specify whether a <a>float</a> floats to align with a
Expand Down Expand Up @@ -65,110 +67,15 @@ Terminology</h2>
<dt><dfn>Float containing block formatting context</dfn>
<dd>
The block formatting context inside of which the float is embedded.
<dt><dfn>Initial float reference</dfn>
<dd>
The entity to which the float is aligned initially, before automatic float
deference takes place.
<dt><dfn>Float reference</dfn>
<dd>
The entity to which the float is aligned.
</dl>

<h2 id="positioning">
Difference between inline floats and absolutely positioned elements</h2>

<p>
Inline floats and absolutely positioned elements are both out-of-flow elements.
Absolutely positioned elements that are also exclusions can imitate many of
the features of floats.

<p>
However, in the case of inline floats, the block formatting context that
contains them (the <a>float containing block formatting context</a>) is
required to include the area occupied by the float, which is not a requirement
for absolutely positioned elements.

<div class="example">
An inline float inside a <a>float containing block formatting context</a> given
by a display-inline-block element. The element, which has a green border, is
expanded to include the brown float.

<code><pre>
&lt;style>
.float {
float: left;
margin: 5px;
}
.border {
border: 3px solid black;
margin: 5px;
}
#outer {
border: 1px solid green;
display: inline-block;
}
canvas {
background-color: brown;
}
p {
margin: 5px;
}
&lt;/style>
&lt;div id="outer">
&lt;p class="border">
&lt;span class="float border">
&lt;canvas width="100" height="100"/>
&lt;/span>
First paragraph.
&lt;/p>
&lt;p class="border">
Second paragraph and some more text.
&lt;/p>
&lt;/div>
</pre></code>

<img alt="sample rendering" src="images/float_containing_context.png">

In comparison, the below is the same HTML, but the float is replaced by an
absolutely positioned element that is also an exclusion. The <a>float
containing block formatting context</a> is still given by a
display-inline-block element. However, the element, marked by a green border,
does not expand to include the brown, absolutely positioned element.

<code><pre>
&lt;style>
.float {
position: absolute;
top: 8px;
left: 8px;
wrap-flow: both;
}
.border {
border: 3px solid black;
margin: 5px;
}
#outer {
border: 1px solid green;
display: inline-block;
position: relative;
}
canvas {
background-color: brown;
}
&lt;/style>
&lt;div id="outer">
&lt;p class="border">
&lt;span class="float border">
&lt;canvas width="100" height="100"/>
&lt;/span>
First paragraph.
&lt;/p>
&lt;p class="border">
Second paragraph and some more text.
&lt;/p>
&lt;/div>
</pre></code>

<img alt="sample rendering" src="images/positioned_containing_context.png">

</div>


<h2 id="floating">
Floating to the inline-start/inline-end and block-start/block-end</h2>
Expand Down Expand Up @@ -921,7 +828,139 @@ img {

</div>

<h2 id="relation_to_absolutely_positioned_exclusions">
Floats and absolutely positioned exclusions</h2>

Floats and absolutely positioned exclusions share some common traits, but in the
case of inline floats they are not the same. Floats that are not inline floats
should behave the same as absolutely positioned exclusions with positions and
sizes manually set to prevent overlap between floats and to prevent floats from
moving beyond the edges of the float reference, with the float reference being
grown as much as needed up to its maximum extend to accommodate all containing
floats.

<h3 id="inline_floats_and_absolutely_positioned_exclusions">
Differences between inline floats and absolutely positioned elements</h3>

<em>This section is not normative.</em>

<p>
Inline floats and absolutely positioned elements are both out-of-flow elements.
Absolutely positioned elements that are also exclusions can imitate many of
the features of floats.

<p>
However, in the case of inline floats, the block formatting context that
contains them (the <a>float containing block formatting context</a>) is
required to include the area occupied by the float, which is not a requirement
for absolutely positioned elements.

<div class="example">
An inline float inside a <a>float containing block formatting context</a> given
by a display-inline-block element. The element, which has a green border, is
expanded to include the brown float.

<code><pre>
&lt;style>
.float {
float: left;
margin: 5px;
}
.border {
border: 3px solid black;
margin: 5px;
}
#outer {
border: 1px solid green;
display: inline-block;
}
canvas {
background-color: brown;
}
p {
margin: 5px;
}
&lt;/style>
&lt;div id="outer">
&lt;p class="border">
&lt;span class="float border">
&lt;canvas width="100" height="100"/>
&lt;/span>
First paragraph.
&lt;/p>
&lt;p class="border">
Second paragraph and some more text.
&lt;/p>
&lt;/div>
</pre></code>

<img alt="sample rendering" src="images/float_containing_context.png">

In comparison, the below is the same HTML, but the float is replaced by an
absolutely positioned element that is also an exclusion. The <a>float
containing block formatting context</a> is still given by a
display-inline-block element. However, the element, marked by a green border,
does not expand to include the brown, absolutely positioned element.

<code><pre>
&lt;style>
.float {
position: absolute;
top: 8px;
left: 8px;
wrap-flow: both;
}
.border {
border: 3px solid black;
margin: 5px;
}
#outer {
border: 1px solid green;
display: inline-block;
position: relative;
}
canvas {
background-color: brown;
}
&lt;/style>
&lt;div id="outer">
&lt;p class="border">
&lt;span class="float border">
&lt;canvas width="100" height="100"/>
&lt;/span>
First paragraph.
&lt;/p>
&lt;p class="border">
Second paragraph and some more text.
&lt;/p>
&lt;/div>
</pre></code>

<img alt="sample rendering" src="images/positioned_containing_context.png">

</div>

<h3 id="fixed_height_float_references">
Page floats with float references with fixed heights
</h3>

If a page floats are inside a float reference with a fixed height, the float
reference is filled up until it cannot contain the following page float. All
subsequent page floats are deferred to the next column/region/page.

<h3 id="variable_height_nomaximum_float_references">
Page floats with variable height float references with no maximum height
</h3>
Variable height float references are grown to accommodate all its containing page
floats. Page floats inside of variable height float references without a maximum
height are therefore never deferred automatically.

<h3 id="variable_heihgt_maximum_height_float_references">
Page floats with variable height float references with a set maximum height
</h3>
Float references with a variable height with a set max height are grown to
accommodate all of its containing page floats up to their maximum height. Subsequent
page floats are deferred to the following column/region/page.


<h2 id="overconstrained-page-floats">Overconstrained floats</h2>
Expand Down