Table of contents

Appendices

7.18 Float-related Properties

clear[top]

CSS2 Definition:

CSS2 Reference: [ "clear" property ] http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-clear

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. (It may be that the element itself has floating descendants; the 'clear' property has no effect on those.)

This property may only be specified for block-level elements (including floats). For compact and run-in boxes, this property applies to the final block box to which the compact or run-in box belongs.

Values have the following meanings when applied to non-floating block boxes:

left

The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

right

The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.

both

The generated box is moved below all floating boxes of earlier elements in the source document.

none

No constraint on the box's position with respect to floats.

When the property is set on floating elements, it results in a modification of the rules for positioning the float. An extra constraint (#10) is added [to those specified in the description of the 'float' property]:

10. The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes (in the case of 'clear: right'), or both ('clear: both').

XSL modifications to the CSS definition:

A start-float is defined to mean an area with area-class "xsl-side-float" that was generated by an fo:float with property "float" specified as "left" or "start".

An end-float is defined to mean an area with area-class "xsl-side-float" that was generated by an fo:float with property "float" specified as "right" or "end".

A side-float is defined to mean either a start-float or an end-float.

An area is defined to "clear" a side-float if the before-edge of the area's border-rectangle is positioned to be after the after-edge of the float, or if the area is not a descendant of the side-float's parent reference-area.

A block-level formatting object is defined "to clear" a side-float if the areas generated by the formatting object clear the side-float.

In XSL this property applies to block-level formatting objects and fo:float.

The clear property when applied to an fo:float that generates side-floats does not apply to the fo:float's anchor-area.

Values have the following meanings:

start

Specifies that each area generated by the formatting object must clear every start-float whose parent reference-area is the nearest ancestor reference-area of the generated area, provided the start-float was generated by an fo:float that is before this formatting object, using pre-order traversal order of the formatting tree. Additionally specifies that each area generated by the formatting object must be placed so that the reference-area chain containing the generated area's nearest ancestor reference-area does not contain a later reference-area that is the parent of a start-float generated by an fo:float that is before this formatting object, using pre-order traversal of the formatting tree.

end

Specifies that each area generated by the formatting object must clear every end-float whose parent reference-area is the nearest ancestor reference-area of the generated area, provided the end-float was generated by an fo:float that is before this formatting object, using pre-order traversal order of the formatting tree. Additionally specifies that each area generated by the formatting object must be placed so that the reference-area chain containing the generated area's nearest ancestor reference-area does not contain a later reference-area that is the parent of an end-float generated by an fo:float that is before this formatting object, using pre-order traversal of the formatting tree.

left

Interpreted as "clear='start'".

right

Interpreted as "clear='end'".

both

Specifies that each area generated by the formatting object must clear every side-float whose parent reference-area is the nearest ancestor reference-area of the generated area, provided the side-float was generated by an fo:float that is before this formatting object, using pre-order traversal order of the formatting tree. Additionally specifies that each area generated by the formatting object must be placed so that the reference-area chain containing the generated area's nearest ancestor reference-area does not contain a later reference-area that is the parent of a side-float generated by an fo:float that is before this formatting object, using pre-order traversal of the formatting tree.

none

This property does not impose any constraints.

When a block-level formatting object is constrained by the "clear" property, its space-before property component values may be altered as necessary for each area that it generates, in order to meet the constraint. The alterations are constrained to produce the minimum additional space required to meet the constraint of the "clear" property.

NOTE: 

Depending on how near a side-float's after-edge is to the after-edge of its parent reference-area, a block-level formatting object may not be able to generate an area that is a descendant of the side-float's parent reference-area. In this case the first block-area generated by the formatting object must be placed in one of the following reference-areas in the reference-area chain that contains the side-float's parent reference-area.

float[top]

CSS2 Definition:

CSS2 Reference: [ "float" property ] http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float

This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. Values have the following meanings:

left

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the "clear" property). The "display" is ignored, unless it has the value "none".

right

Same as "left", but content flows on the left side of the box, starting at the top.

none

The box is not floated.

Here are the precise rules that govern the behavior of floats:

1. The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.

2. If the current box is left-floating, and there are any left floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

3. The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.

4. A floating box's outer top may not be higher than the top of its containing block.

5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

6. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

8. A floating box must be placed as high as possible.

9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

XSL modifications to the CSS definition:

The following values have been added for XSL: "before", "start", and "end".

In XSL this property applies only to fo:float

Values have the following meanings:

before

Specifies that the block-areas generated by the fo:float shall be with area-class "xsl-before-float", and shall be descendants of a before-float-reference-area generated by a conditional sub-region of a region-body.

start

Specifies that the block-areas generated by the fo:float shall be with area-class "xsl-side-float" and shall be floated toward the start-edge of the reference area.

end

Specifies that the block-areas returned by the fo:float shall be with area-class "xsl-side-float" and shall be floated toward the end-edge of the reference area.

left

Interpreted as "float='start'".

right

Interpreted as "float='end'".

none

Specifies that the block-areas generated by the fo:float shall be normal.

This property determines the area-class trait of the block-areas returned by the fo:float, which controls the placement and parent of these block-areas.

intrusion-displace[top]

XSL Definition:

Values have the following meanings:

auto

For a reference-area, this value is treated as if "block" had been specified. For any other area, this value is treated as if "line" had been specified.

none

Neither line areas nor block areas are displaced (nor have any adjustment to their inline progression dimension) due to the intrusion of the float. The float overlays the area without affecting any of the content of the area, unless the "clear" property has a specified value other than "none".

line

The start and end edges of line areas are displaced just enough so that any intrusions no longer intersects the content rectangle of the line area. For the purposes of this test, the allocation rectangle of the intrusion is used in the intersection. Also, such intersections are done with respect to the line area prior to its adjustment of any "text-indent". This will cause a reduction in the inline progression dimension of the line area.

NOTE: 

This is the behavior of floats described in CSS2.

indent

The start edge (and end edge) of each line within the block area on which the property occurs is displaced (a) by at least the same amount it would be displaced by the "line" value of this property and (b) in addition, by an amount that preserves the relative offset of that start edge (or end edge) with respect to the start edge (or end edge) of any other line displaced by any intrusion that cause the current line to be displaced. If there is more than one intrusion that could cause a displacement of the line, the largest such displacement is used.

block

The start edge (and end edge) of the block is displaced by the least amount necessary to insure that (a) the start edge (end edge) of the block does not intersect any of the start intrusions (end intrusions) that overlap that block and (b) the amount by which it is displaced is at least as much as the displacement of the parent area, provided the parent is a block-area which is not a reference-area. An intrusion is said to overlap a block if the there is a line parallel to the inline progression direction that intersects the allocation rectangles of both the block and the intrusion.

This property determines the displacement strategy in the presence of intrusions.

NOTE: 

Displacing the start edge (and/or end edge) of a block, necessarily displaces the start edge (and/or end edge) of all lines and blocks contained within that block.