diff --git a/css-page-floats/Overview.bs b/css-page-floats/Overview.bs index d94c6bb4079a..9177125f5c86 100644 --- a/css-page-floats/Overview.bs +++ b/css-page-floats/Overview.bs @@ -21,6 +21,8 @@ Ignored Terms: near, 3em, intrude, top-corner, bottom-corner, left, right, both,

Overview

+ This section is not normative. + This specification adds new keywords on the 'float' property. This document allows to specify whether a float floats to align with a @@ -65,110 +67,15 @@ Terminology
Float containing block formatting context
The block formatting context inside of which the float is embedded. +
Initial float reference +
+ The entity to which the float is aligned initially, before automatic float + deference takes place.
Float reference
The entity to which the float is aligned. -

-Difference between inline floats and absolutely positioned elements

- -

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

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

- An inline float inside a float containing block formatting context given - by a display-inline-block element. The element, which has a green border, is - expanded to include the brown float. - -
-<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;
-}
-</style>
-<div id="outer">
-    <p class="border">
-        <span class="float border">
-            <canvas width="100" height="100"/>
-        </span>
-        First paragraph.
-    </p>
-    <p class="border">
-        Second paragraph and some more text.
-    </p>
-</div>
-
- - sample rendering - - In comparison, the below is the same HTML, but the float is replaced by an - absolutely positioned element that is also an exclusion. The float - containing block formatting context 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. - -
-<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;
-}
-</style>
-<div id="outer">
-    <p class="border">
-        <span class="float border">
-            <canvas width="100" height="100"/>
-        </span>
-        First paragraph.
-    </p>
-    <p class="border">
-        Second paragraph and some more text.
-    </p>
-</div>
-
- - sample rendering - -
-

Floating to the inline-start/inline-end and block-start/block-end

@@ -921,7 +828,139 @@ img { +

+Floats and absolutely positioned exclusions

+ +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. + +

+Differences between inline floats and absolutely positioned elements

+ + This section is not normative. + +

+ 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. + +

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

+ An inline float inside a float containing block formatting context given + by a display-inline-block element. The element, which has a green border, is + expanded to include the brown float. + +
+<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;
+}
+</style>
+<div id="outer">
+    <p class="border">
+        <span class="float border">
+            <canvas width="100" height="100"/>
+        </span>
+        First paragraph.
+    </p>
+    <p class="border">
+        Second paragraph and some more text.
+    </p>
+</div>
+
+ + sample rendering + + In comparison, the below is the same HTML, but the float is replaced by an + absolutely positioned element that is also an exclusion. The float + containing block formatting context 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. + +
+<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;
+}
+</style>
+<div id="outer">
+    <p class="border">
+        <span class="float border">
+            <canvas width="100" height="100"/>
+        </span>
+        First paragraph.
+    </p>
+    <p class="border">
+        Second paragraph and some more text.
+    </p>
+</div>
+
+ + sample rendering + +
+

+Page floats with float references with fixed heights +

+ +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. + +

+Page floats with variable height float references with no maximum height +

+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. + +

+Page floats with variable height float references with a set maximum height +

+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.

Overconstrained floats