CSS Page Floats Module Level 3

First paragraphFLOAT

Second paragraph
[FLOAT]
And some more text

element, rather than the

and inline elements.
3.2.
The
float
property
Name:
float
Value:
block-start
block-end
inline-start
inline-end
snap-block

snap-inline

left
right
top
bottom
none
Initial:
none
Applies to:
all elements.
Inherited:
no
Percentages:
N/A
Computed value:
as specified
Canonical order:
per grammar
Animation type:
by computed value type
inline-start
If the
float reference
is a line box, the element generates a box that
is floated to the line-start outer edge of the
float reference
and
content flows on the line-end side of the box.
If the
float reference
is not a line box, the element generates a box
that is floated to the line-start and block-start outer edges of the
float
reference
inline-end
If the
float reference
is a line box, the element generates a box that
is floated to the line-ebd outer edge of the
float reference
and
content flows on the line-start side of the box.
If the
float reference
is not a line box, the element generates a box
that is floated to the line-end and block-end outer edges of the
float
reference
block-start
If the
float reference
is a line box, block-start behaves like
inline-start.
If the
float reference
is not a line box, the element generates a box
that is floated to the block-start and line-start outer edges of the
float
reference
The initial value of the
max-width
or
max-height
property that
refers to the
inline size
of the float is '100%'.
Content flows on the block-end side of the box.
block-end
If the
float reference
is a line box, block-end behaves like inline-end.
If the
float reference
is not a line box, the element generates a box
that is floated to the block-end and line-end outer edges of the
float
reference
The initial value of the
max-width
or
max-height
property that
refers to the
inline size
of the float is '100%'.
Content flows on the block-start side of the box.
left
If the
float reference
is a line box, behaves like inline-start or
inline-end, whichever corresponds to line-left for the float reference.
Otherwise, behaves like block-end, inline-start or inline-end depending on
the float containing block’s
direction
and
writing-mode
right
If the
float reference
is a line box, behaves like inline-start or
inline-end, whichever corresponds to line-right for the float reference.
Otherwise, behaves like block-start, inline-start or inline-end depending on
the float containing block’s
direction
and
writing-mode
top
Behave like block-start or inline-start depending on the float
containing block’s
direction
and
writing-mode
bottom
Behave like block-end or inline-end depending on the float
containing block’s
direction
and
writing-mode
snap-block()
The
snap-block()
function is defined as:
snap-block() = snap-block(

[ start
end
near ]
Has no effect if the element is an
inline float
If the element is a
page float
, it makes the element float to the
start or the end of the block if it naturally appears within a certain
distance from either one. The length value(s) specifies the maximum
distance from the start/end that an element must be within in order to be
floated; one length value specifies the distance from both the start and
the end, two length values specify the distance from the start and end,
respectively.
The optional keyword value specifies where the element is floated: start,
end, or the nearest of the two. The initial value is
near
. If
near
is in effect and the element is within the specified distance both from
the start and the end, end wins.
snap-block
Behaves as
snap-block(2em, near)
snap-inline()
The
snap-inline()
function is defined as:
snap-inline() = snap-inline(

[ left
right
near ]
Has no effect if the element is an
inline float
If the element is a
page float
, it makes the element float to the
line start or line end if it naturally appears within a certain distance
from the start or end of the line. The length value(s) specifies the
maximum distance from the start/end that an element must be within in
order to be floated; one length value specifies the distance from both the
start and the end, two length values specify the distance from the start
and end, respectively.
The optional keyword value specifies where the element is floated: line
start, line end, or the nearest of the two. The initial value is
near
If
near
is in effect and the element is within the specified distance
both from the start and the end, end wins.
snap-inline
same as
snap-inline(2em, near)
none
The box is not floated.
There is currently no way to float into a combination of directions (top right,
right top, left bottom, bottom left, etc.).
Float figure to top of reference column:
.figure { float-reference: column; float: top }
In this example a block-start float that does not fill the entire
inline size
of the float reference is placed at the start of the block and line.
.figure { float-reference: column; float: block-start; width: 50% }
In this example, a figure naturally appears close to a column break. There is
not enough space for the figure in the first column, and it is therefore placed
in the second column, leaving white space at the bottom of the first column.
To avoid the white space, the image can be floated to the nearest edge (in the
block direction):
.figure { float-reference: column; float: snap-block }
In this example, the figure is already at the nearest edge, so it does not
move. However, floats allow subsequent content to be displayed before the
float and the white space can therefore be filled:
In this example, two figures naturally appear in the text flow:
A typographer would typically try to avoid single lines of text above/below
figures, which can be achieved with:
div.figure { float-reference: column; float: snap-block(1.5em) }
The length value specifies the reach of the snap function; in this example the
second figure is affected, but not the first.
In this example, two figures naturally appear in the text flow:
To make the figures snap to the nearest edges, this code can be applied:
div.figure { float-reference: column; float: snap-block(2.5em) }
The resultant rendering is:
In this example, tables will snap to the top/bottom if the top/bottom of the
border box is closer than
3em
from the top/bottom of the float-reference
which is a block element.
table { float: snap }
table { float: snap-block(3em) }
table { float: snap-block(3em, bottom) }
table { float: snap-block(3em 2em, bottom) }
More examples with regions as
float reference
s needed.
4.
The
clear
property
Name:
clear
Value:
inline-start
inline-end
block-start
block-end
left
right
top
bottom
both-inline
both-block
both
none
Initial:
none
Applies to:
block-level elements, floats, regions, pages
Inherited:
no
Percentages:
N/A
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
To prevent stacking of floats, the
clear
property can be used:
inline-start
If applied to an inline float, requires that the block-start outer edge of
the box comes after the block-end outer edge of any inline-start-floats
with an inline-start-float-reference that resulted from elements earlier
in the source document.
If applied to a
page float
, the
float reference
in which the
page float is placed will be seen as full when determining whether it can
host subsequent page floats that float in the inline-start direction.
inline-end
If applied to a block-level element or an
inline float
, requires
that the block-start outer edge of the box comes after the block-end outer
edge of any inline-end-floats with an inline-end-float-reference that
resulted from elements earlier in the source document.
If applied to a
page float
, the
float reference
in which the
page float is placed will be seen as full when determining whether it can
host subsequent page floats that float in the inline-end direction.
block-start
If applied to a block-level element or an
inline float
, behaves like
inline-start.
If applied to a page float, the
float reference
in which the page
float is placed will be seen as full when determining whether it can host
subsequent page floats that float in the block-start direction.
block-end
If applied to a block-level element or an
inline float
, behaves
like inline-end.
If applied to a page float, the
float reference
in which the page float
is placed will be seen as full when determining whether it can host
subsequent page floats that float in the block-end direction.
left
Behave like block-end, inline-start or inline-end depending on the float
containing block’s
direction
and
writing-mode
right
Behave like block-start, inline-start or inline-end depending on the float
containing block’s
direction
and
writing-mode
top
Behave like block-start or inline-start depending on the float
containing block’s
direction
and
writing-mode
bottom
Behave like block-end or inline-end depending on the float
containing block’s
direction
and
writing-mode
both-inline
Behave like inline-start and inline-end.
both-block
Behave like block-start and block-end.
both
Behave like both-inline.
all
Behave like both-block and both-inline.
In this example, the two figures may appear in the same column:
.figure { float-reference: column; float: bottom; clear: none }

In this example, the two figures will appear in different columns:
.figure { float-reference: column; float: bottom; clear: bottom }

In this example, the two figures may appear at the bottom of the same column
due to clearing only at the top:
.figure { float-reference: column; float: bottom; clear: top }

In this example, the two figures will appear in different columns due to
clearing at the bottom:
.figure { float-reference: column; float: bottom; clear: bottom }

In this example, the two figures end up the top corner of two different
pages:
.figure { float-reference: page; float: top; clear: top }

In this example, the two figures request different positions, and they may
therefore end up in the same column:
.figure.one { float-reference: column; float: top; clear: top }
.figure.two { float-reference: column; float: bottom; clear: bottom }

5.
Deferring page floats
Users can influence the placement of a
page float
by deferring them to
another
fragmentation container
than where the
float anchor
is
placed.
A float that is an
inline float
cannot be deferred.
Float deferring assigns an
initial float reference
, yet float stacking
can lead page floats being moved to a subsequent
fragmentation container
if their
initial float reference
lacks the space to host them.
The
float-defer
property is introduced to control deferring floats:
5.1.
The
float-defer
property
Name:
float-defer
Value:

last
none
Initial:
none
Applies to:
floats
Inherited:
no
Percentages:
N/A
Computed value:
specified keyword or integer
Canonical order:
per grammar
Animation type:
discrete
This property specifies whether the
initial float reference
of a
page
float
is the
fragmentation container
in which the
float anchor
is placed after previous page floats have been placed, or in another one.
This property is ignored if the element is an
inline float
Values are:
none
The
initial float reference
is the
fragmentation container
in which the
float anchor
is placed after all previous page floats have been placed.

A positive integer value indicates that the
initial float reference
of
the page float should be Nth
fragmentation container
of the `fragmentation
flow`, where N is the value of the `float-defer` property plus the order
number of the
fragmentation container
in which the
float anchor
is placed
after all previous page floats have been placed within the given
fragmentation context
. If N is larger than the order number of the last
fragmentation container
within the given
fragmentation context
at the time of
assignment, then N is the order number of the last
fragmentation container
within the given
fragmentation context
A negative integer value indicates that the
initial float reference
of
the page float should be a
fragmentation container
of the
fragmentation context
, counting backward from the end, so that -1
is the last
fragmentation container
, -2 is the next-to-last, etc. .
In the case of a negative integer value, the
initial float reference
is the
Nth
fragmentation container
of the
fragmentation context
, where N is 1
plus the order number of the last
fragmentation container
within the given
fragmentation context
after all previous page floats have been placed plus
the value of the `float-defer` property.
Zero is the same as `none`.
If the value of the `float-defer` property would cause the
initial float
reference
to be an inexistent
fragmentation container
, the property
is interpreted as if it were zero.
Negative float-defer values put the initial float reference a certain number
to be a certain amount of fragmentation containers from the last fragmentation
container at the time of the placement. Subsequent page float stacking
can mean that a page float is being placed in a later fragmentation container
(a page float with float-defer set to -3 can end up being placed in the
last fragmentation container), and later page floats may mean that new
fragmentation containers are added, so that the a fragmentation container
that previously was Nth last fragmentation container within a fragmentation
context now is the N+Xth last. Additional fragmentation container(s) that
are added after the page float was placed, will not cause the page float
to be moved.
last
The
initial float reference
is the last
fragmentation container
within
the given
fragmentation context
after all previous page floats have been
placed.
Float figure to the top of the region that follows the region in which
the
float anchor
is placed:
.figure { float-reference: region }
.figure { float: top }
.figure { float-defer: 1 }
Float figure to the top of the next-to-last column:
.figure { float-reference: column; float: top; float-defer: -2 }
Float figure to the top of the last page:
.figure { float-reference: page }
.figure { float: top }
.figure { float-defer: -1 }
Float figure to the top of the last column:
.figure { float-reference: column }
.figure { float: top }
.figure { float-defer: last }
Float figure to top of the last column:
.figure { float-reference: column; float: top; float-defer: last }
6.
Wrapping around page floats
Page floats have their
wrap-flow
property set to
both
initially and are
treated like exclusions. This specification does not make any further
specification about wrapping contents around page floats.
Should the
wrap-flow
really be set to both, or should the flow be restricted
to only be on one side?
7.
The
float-offset
property
Name:
float-offset
Value:

Initial:
Applies to:
floats
Inherited:
no
Percentages:
see prose
Computed value:
computed

value
Canonical order:
per grammar
Animation type:
by computed value type
This property pushes a
page float
in direction opposite of the where it has been
floated with
float
If the element is an
inline float
, this property is ignored.
This property can only influence a
page float
along an axis along which
it has been floated.

Percentage values are computed according to this formula:
(containing-block-width - float-width) * percentage
(containing-block-height - float-height) * percentage
img {
float-reference: column;
float: left;
float-offset: 2em;
In this example, the image is floated to the left. Therefore,
float-offset
may only push the element to the right.
img {
float-reference: column;
float: right;
float-offset: 5px;
8.
Page float placement
The order of page floats placement is determined by the following rules:
All page floats with
float-reference
set to `page` are placed, in
document order, before those with
float-reference
set to `region` and
`column`.
Thereafter, page floats with
float-reference
set to `column` and `region`
are placed in document order.
The placement of a single page float is a process that has to be terminated
entirely before the placement of a subsequent page float can be initiated. The
placement process consists of the following steps:
Determine the
initial float reference
by considering the
fragmentation container
in which the
float anchor
is placed and
the `float-defer` property of the page float. The
float reference
is
initially set to be the same as the
initial float reference
Determine if the given
float reference
has enough space or can be
expanded to host the page float, if the rules of
float stacking
and
float reference
growth
are to be followed. If this is not the case, and the
float
reference
is not the last
fragmentation container
within the given
fragmentation context
, then make the following
fragmentation
container
within the given
fragmentation context
the
float
reference
. Repeat this step until the
float reference
can be
expanded enough to host the page float or it is the last
fragmentation
container
within the given
fragmentation context
If the
float reference
is the last
fragmentation container
within
the given
fragmentation context
, and it has not enough space and cannot be
expanded to host the page float, then do the following:
If the
fragmentation context
allows for the addition of another
fragmentation container
and an additional
fragmentation container
would have the needed size to host the page float, a new
fragmentation
container
is added to the end of the
fragmentation context
. The
float reference
is set the newly created
fragmentation
container
Otherwise, if the
fragmentation container
is a region, then the
'regionOverset` attribute of the
fragmentation container
is set to
`overset`.
The page float is placed in the
float reference
according to the rules
of 'float stacking' and 'float reference growth'.
8.1.
Float reference growth
Float references can grow up to the their `max-height` and `max-width` or their
`available size`, whichever is the lowest, in order to accommodate page floats.
8.2.
Rules for page float stacking
Page floats are stacked within a given
float reference
in the order of their
placement and in the direction of the inline- and flow-directions of the
fragmentation context
while
not overlapping
with any other page
floats with the same
float reference
and by keeping a distance N between
the page float’s margin edge and the padding edge of the
float reference
as well as between the page float’s margin edge and the margin edge of the last
previously placed page float with the same
float reference
and the same
float
value, where N is the
float-offset
value of the page float.
For the purpose of calculating whether enough space is available for a page floats
within the
float reference
, it is assumed that the page floats in the block
directions fill the entire line size of the
float reference
and page floats
in the inline direction fill the entire block size of the
float reference
For the purpose of placement, page floats in the block-start direction are also
placed at the inline-start edge of the float reference and vice versa, and page
floats in the block-end direction are placed at the inline-end edge of the float
reference and vice versa.
If the page float has a defined
clear
-value, then the
float reference
in
which the page float is placed is closed for all subsequent page floats that
floating in the direction specified by the
clear
-value.
We can effectively currently float to two corners: inline-start/block-start and
inline-end/block-end. We should augment this with the option to have a secondary
float direction to allow basic 2D floating.
9.
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.
9.1.
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.

First paragraph.

Second paragraph and some more text.

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.

First paragraph.

Second paragraph and some more text.

10.
Overconstrained floats
In many cases, the specified values on these properties cannot be honored.
The number of columns is limited, and high values therefore cannot be honored:
.figure { float-reference: column; float: top; float-defer: 1000 }
A narrow screen may only have room for one column, in which case this request
cannot be honored:
.figure { float-reference: column; float: top; float-defer: -5 }
In long documents, all content cannot fit on the last page, and this rule
therefore cannot be honored:
p { float-reference: page; float: top; float-defer: last }
Floats are processed in the order they appear in the source. However, the
visual order of floats may not be the same as the source order.
Consider this code:
.one { float-reference: page; float: top; float-defer: last }
.two { float-reference: column; float: top; clear: column }

In this example, the first element requests to appear on the last page, while
the second element requests to appear in the natural column. If the natural
column of the second element appears on a page before the last page, the second
element will appear visually before the first.
Consider this code:
.one { float-reference: page; float: top; float-defer: last }
.two { float-reference: page; float: top; clear: page; }

If all content can fit on one page, the first page will also be the last page.
The first element is processed first and is placed on top of the first page.
Then the second element is processed. It requests a clear top, something which is
not possible on the first page. Therefore, a second page is created and the
first element is moved there. Even if the first element requests to be on the
last page, it will not appear there.
When resolving over-constrained layouts, the order of importance for defined
goals are:
honor 'clear: top/bottom'
honor
float-defer
honor 'float: top/bottom'
display all content (as described by other CSS properties)
keep the number of pages to a minimum
Acknowledgments
This specification is made possible by input from
Rossen Atanassov,
Tab Atkins Jr.,
David Baron,
Lars Erik Bolstad,
Bert Bos,
Mike Bremford,
Dave Cramer,
Michael Day,
Werner Donné,
Brady Duga,
James Elmore,
Elika Etemad,
Michel Fortin,
Daniel Glazman,
Melinda Grant,
Ian Hickson,
Laurens Holst,
Brad Kemper,
Toru Kawakubo,
Rune Lillesveen,
Peter Linss,
Cameron McCormack,
Paul E. Merrell,
Del Merritt,
Markus Mielke,
Kelly Miller,
Alex Mogilevsky,
Peter Moulder,
Shinyu Murakami,
Michel Onoff,
Anton Prowse,
Liam R E Quin,
Jacob Grundtvig Refstrup,
Florian Rivoal,
Christian Roth,
Allan Sandfeld Jensen,
Simon Sapin,
Alan Stearns,
Morten Stenshorne,
Philip Taylor,
Ian Tindale,
Ladd Van Tol,
Lea Verou,
Tarquin (Mark) Wilton-Jones,
Steve Zilles,
Tantek Çelik
and the CSS Working Group members.
Privacy Considerations
No new privacy considerations have been reported on this specification.
Security Considerations
No new security considerations have been reported on this specification.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with

, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
all
, in § 4
block-end
value for clear
, in § 4
value for float
, in § 3.2
block-start
value for clear
, in § 4
value for float
, in § 3.2
both
, in § 4
both-block
, in § 4
both-inline
, in § 4
bottom
value for clear
, in § 4
value for float
, in § 3.2
clear
, in § 4
column
, in § 3.1
Float
, in § 2
float
, in § 3.2
Float anchor
, in § 2
Float block formatting context
, in § 2
Float containing block formatting context
, in § 2
float-defer
, in § 5.1
float-offset
, in § 7
Float reference
, in § 2
float-reference
, in § 3.1
Initial float reference
, in § 2
inline
, in § 3.1
inline-end
value for clear
, in § 4
value for float
, in § 3.2
Inline float
, in § 2
inline-start
value for clear
, in § 4
value for float
, in § 3.2
left
value for clear
, in § 4
value for float
, in § 3.2
none
, in § 3.2
Not overlapping
, in § 2
page
, in § 3.1
Page float
, in § 2
region
, in § 3.1
right
value for clear
, in § 4
value for float
, in § 3.2
snap-block
, in § 3.2
snap-block()
, in § 3.2
snap-inline
, in § 3.2
snap-inline()
, in § 3.2
top
value for clear
, in § 4
value for float
, in § 3.2
Terms defined by reference
[CSS-BREAK-4]
defines the following terms:
fragmentation container
fragmentation context
[CSS-DISPLAY-4]
defines the following terms:
out-of-flow
[CSS-VALUES-4]
defines the following terms:



CSS-wide keywords
[CSS-WRITING-MODES-3]
defines the following terms:
direction
[CSS-WRITING-MODES-4]
defines the following terms:
inline size
writing-mode
[CSS3-EXCLUSIONS]
defines the following terms:
wrap-flow
References
Normative References
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 3
. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[CSS3-EXCLUSIONS]
Rossen Atanassov; Vincent Hardy; Alan Stearns.
CSS Exclusions Module Level 1
. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
Non-Normative References
[CSS3GCPM]
Rachel Andrew; Mike Bremford.
CSS Generated Content for Paged Media Module
. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Anim­ation type
Canonical order
Com­puted value
clear
inline-start | inline-end | block-start | block-end | left | right | top | bottom | both-inline | both-block | both | none
none
block-level elements, floats, regions, pages
no
N/A
discrete
per grammar
specified keyword
float
block-start | block-end | inline-start | inline-end | snap-block | | snap-inline | | left | right | top | bottom | none
none
all elements.
no
N/A
by computed value type
per grammar
as specified
float-defer
| last | none
none
floats
no
N/A
discrete
per grammar
specified keyword or integer
float-offset

floats
no
see prose
by computed value type
per grammar
computed value
float-reference
inline | column | region | page
inline
all elements.
no
N/A
discrete
per grammar
specified keyword
Issues Index
Page floats as defined here work with different types of fragmentation types
(columns, regions, pages) as well as container elements. The specification
is no longer specific to print or to pages.
At the same time, inline floats and page floats differ in many ways, and it may
(or may not) be a good idea to separate the two entirely.
Therefore, the name
CSS Page Floats
should probably be replaced with
a more appropriate name.
The
float containing block formatting context
having the same dimensions
as the
float reference
means that all floats that are not inline floats
cannot move outside of their float references. Is this wanted?
It is not possible to specify a block element which element to use as the
reference element. This has been requested.
Maybe something like:

First paragraphFLOAT

Second paragraph
[FLOAT]
And some more text

This should float both floats with reference to the

element, rather than the

and inline elements.
There is currently no way to float into a combination of directions (top right,
right top, left bottom, bottom left, etc.).
Should the
wrap-flow
really be set to both, or should the flow be restricted
to only be on one side?
We can effectively currently float to two corners: inline-start/block-start and
inline-end/block-end. We should augment this with the option to have a secondary
float direction to allow basic 2D floating.