The float Property

The float property is used to specify whether an element is floated or not and the direction (left or right) that it is floated. The float property can be applied to any element. It is not an inherited property. It can take the values left, right, none, and inherit. Its initial value is none.

A floated element does not affect the positioning of other block elements. However, inline boxes are shortened to make room for the margin box of a floted element.

Margins on floated elements never collapse. How a floated element behaves is described in the W3C specification of floated elements. The description consists of nine rules.

Rule 1 states that the left outer edge (outer edge of the left margin) of a left-floating box may not be to the left of the left edge (outer edge of the padding) of its containing block. An analogous rule holds for right-floating elements.

What this means is that the outer edge of the left margin of a left-floated element will be aligned with the inner edge of the left padding of the containing block. Similarly, the outer edge of the right margin of a right-floated element will be aligned with the inner edge of the right padding of the containing block.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><span>the</span> five boxin<img src="image4.png" alt="image 4" style="float:left;margin:5px;padding:10px;border:solid 5px slategray; background-color:palegreen">g wizards jump quickly, the quick brown fox jumps over the lazy dog</p>

In the above example, the gap between the left border outer edge of the image and left border inner edge of the <p> is 15px. This is because the left margin of the image is 5px and the left padding of the <p> is 10px and, after the image is aligned according to the rule, the margins are next to each other. Internet Explorer 6 and 7 render the image in the second line of the <p>. This is a bug.

Rule 2 states that 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 (the outer edge of the left margin) of the current box must be to the right of the right outer edge (the outer edge of the right margin) of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

What this means is that the outer edge of the margin of a left-floated element will be aligned to the outer margin edge of an earlier-occuring left-floated element. If there is insufficient space for the later-occuring floated element's box, it's top margin's outer edge will be aligned to the earlier-occuring left-floated element's bottom margin's outer edge. Right-floated elements are handled in a similar way, but aligned to the right.

Therefore, elements that are floated to the same side will not overlap each other.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><span>the</span> five boxin<img src="image3.png" alt="image 3" style="padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px;float:left">g w<img src="image3.png" alt="image 3" style="padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px;float:left">izards jump quickly, the quick brown fox jumps over the lazy dog</p>

In the above example, the second left-floated image is to the right of the first left-floated image. The margin between them is 10px (5px + 5px). Internet Explorer 6 and 7 render the image in the second line of the <p>. This is a bug.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';float:left">the quick brown fox jumps over the lazy dog</p> <p class="test" style="float:left">the quick brown fox jumps over the lazy dog</p>

In the above example, there is insufficient space to render the second floated <p> next to the first floated <p>. Therefore it is rendered below it.

Rule 3 states that 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.

Therefore, elements that are floated to opposite sides will never overlap each other.

What this means is that the outer edge of the right margin of a left floated element will be next to the outer edge of the left margin of a right floated element when there is just sufficient horizontal space for the floated elements. If there is extra space, it will appear between the margins of the two floated elements. When there is insufficient space, the second floated element's margin box will be rendered just below the first floated element's margin box.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><img src="image4.png" alt="image 4" style="float:right;padding:10px;border:solid 5px saddlebrown; background-color:bisque;margin:5px"><img src="image4.png" alt="image 4" style="float:left;padding:10px;border:solid 5px yellowgreen; background-color:darkseagreen;margin:5px"></p>

In the above example, the space available in the <p> depends on the width of the viewport. The first picture shows how the floated images are positioned when there is sufficient space in the <p> for each image's margin box. The second picture shows how the floated images are positioned when there is insufficient space in the <p> — the second floated image is rendered below the first floated image.

Rule 4 states that a floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow.

What this means is that the outer edge of the top margin of a floated element cannot be higher than the inner edge of the top margin of its containing block. However, if the preceding element has a bottom margin and the succeeding element has a top margin, these margins will collapse because they will be adjoining to each other. In such a case, the floated element will behave as if it had another block level parent.

Since the margins of inline elements never collapse, the second part of Rule 4 does not apply to inline elements.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';margin:5px;padding:0">the quick brown fox jumps over the lazy dog.</p> <p style="font-size:35px;font-family:'Times New Roman';float:left;margin:5px;padding:0;background: none peru"> the five</p> <p style="font-size:35px;font-family:'Times New Roman';margin:5px;padding:0"><span>the quick brown fox jumps</span> over the lazy dog.</p>

Rule 5 states that 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.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';width:160px;height: 200px;padding:10px;border:dashed 10px steelblue"><img src="image3.png" alt="image 3" style="float:right;vertical-align:bottom;padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px"><img src="image3.png" alt="image 3" style="float:left;vertical-align:bottom;padding:10px;border:solid 5px palevioletred; background-color:darkorchid;margin:5px"></p>

In the above example, because there is insufficient horizontal space, the second float is rendered below the first, even though the second float appears at the left. This demonstrates Rule 5.

Example 7: <p style="font-size:35px;font-family:'Times New Roman';width:160px;height:190px"><img src="image3.png" alt="50x50 image" style="float:left;padding:10px;background-color:orangered"> <img src="image4.png" alt="100x100 image" style="float:left;padding:5px;background-color:aquamarine"> <img src="image3.png" alt="50x50 image" style="float:left"></p>

In the above example, the third image's outer top is in line with the margin box of the second floated image even though there is enough place for it next to the first image. This is in accordance with Rule 5.

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

Another way of putting it is: The outer edge of the margin of a floated element must be at the same height or lower than the inner edge of the padding of any line box that has content whose source code appears earlier than the floated element's.

Content whose source code appears earlier than a particular element's source code is usually on the same line as the element. However, when there is insufficient space for an element, it is rendered on the next line. In this case, if the element is floated, it will float on the next line.

Rule 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. An analogous rule holds for right-floating elements.

Example 8: <p style="font-size:35px;font-family:'Times New Roman';width:100px;height:100px"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"></p>

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

Rule 8 specifies that floated elements that have been positioned according to Rule 2, Rule 5 and Rule 6 have to be positioned as high as possible. Rule 2 specifies two possible positions for a floated box — one lower than the other, Rule 5 specifies that the float be positioned at the same height or lower than a particular margin and Rule 6 specifies that a float must be positioned at the same height or lower than a particular padding. Therefore, Rule 8 specifies that the highest possible position must be chosen.

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

Rule 1, Rule 2, and Rule 3 specify the specify the limit of how much to the right or left a floated element can be positioned. Rule 9 specifies that elements positioned according to those rules must be positoned as left as possible (for left floated elements) or as right as possible (for right floated elements) while not going beyond the limits specified.

Also, Rule 9 specifies that a floated element must be positioned higher but less to the left or right instead of lower but more to the left or right if those are the two available positions.

Example 9: <p style="font-size:35px;font-family:'Times New Roman'"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"></p>

In the above example, the second floated image can also be placed below the first without violating rules 1 to 8. But because of rule 9, it is placed next to the first floated image.

Nested Floats

A floated element can contain floated descendants. A floated element will expand its height and width to accomodate a floated descendant's height. Internet Explorer 6 and 7 do not obey this rule when rendering a floated element that contains floated descendants.

Negative Margins

Floated elements with negative margins obey all of the float rules. However, the outer edge of the margin box of a floated element with negative margins will be within the padding box of the element.

Floated Elements With Negative Margins Overlapping Other Elements

When a floated element has a negative top margin, it may overlap a preceding element. In such a case, the floated element's text and the preceding element's text overlap and the background color of the floated element appears behind the text.

Example 10: <p style="font-size:35px;font-family:'Times New Roman'" >the quick brown fox jumps over the lazy dog</p><p style="margin-top:-40px;float:left;background:none cornsilk;font-size:35px;font-family:'Times New Roman'">the five boxing wizards jump quickly</p>

When a floated element overlaps an element that appears after it in the source, the inline content of that element moves away so as not to overlap the floated content. The background color of the floated element appears behind the text.

Example 11: <p style="float:left;background:none cornsilk;font-size:35px;font-family:'Times New Roman'">the quick</p> <p style="font-size:35px;font-family:'Times New Roman'">the five boxing wizards jump quickly</p>

According to the CSS 2.1 specification, when a float overlaps inline boxes (using negative margins), the inline boxes are rendered on top of the floated element's box.

Example 12: <p style="width:580px;font-size:35px;font-family:'Times New Roman'">the quick brown fox jumps <span style="background:none blueviolet">over the lazy</span> dog. the five boxing <span style="background:none gold">wizards.</span> <span style="float:right;margin-top:-20px;margin-left:-50px">jump quickly</span></p>

A floated element's box is rendered on top of block boxes that it overlaps. However, if the contents of the block box are inline boxes, then the inline boxes will be rendered on top of the floated element's box.

float:none

Since none is the initial value of float, the declaration float:none is only useful to override another float declaration that was applied to an element.

float:inherit

float is not an inherited property. However, using the float:inherit declaration, an element can be made to inherit its parent element's float value.

Internet Explorer 6 and Internet Explorer 7 ignore the float:inherit declaration.