Merge pull request #24 from johanneswilm/master

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

Author: johanneswilm

css-page-floats/Overview.bs

@@ -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
@@ -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>
@@ -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>