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