float property
[This documentation is preliminary and is subject to change.]
Sets or retrieves on which side of the object the text will flow.
 |
Syntax
float: left | right | none | -ms-positioned
Property values
none-
Default. Object displays where it appears in the text.
left-
Text flows to the right of the object.
right-
Text flows to the left of the object.
-ms-positioned-
Specifies that the object is a positioned float. For more information about positioned floats, see Positioned Floats.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value |
Standards information
- CSS 2.1, Section 5.5.25
Remarks
With a value of left or right, the object is treated as block-level—that is, the display property is ignored. For example, floating paragraphs allow the paragraphs to appear side-by-side.
Objects following a floating object move in relation to the position of the floating object.
The floating object is moved left or right until it reaches the border, padding, or margin of another block-level object.
The div and span objects must have a width set for the float attribute to render.
Examples
This example shows how the float attribute affects the flow of the text. The sphere image floats to the left of the text, and the cone floats to the right.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/float_h.htm
<img src="sphere.jpg" style="float:left"> <img src="cone.jpg" style="float:right">
This example uses inline scripting and the floatproperty to swap images when the mouse moves over the button.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/styleFloat.htm
<IMG ID=oSphere SRC="sphere.jpeg" STYLE="float:left">
<IMG ID=oCone SRC="cone.jpeg" STYLE="float:right">
:
<BUTTON onmouseover="oSphere.style.styleFloat='right';
oCone.style.styleFloat='left'"
onmouseout="oSphere.style.styleFloat='left';
oCone.style.styleFloat='right'">
Flip-flop images.
</BUTTON>
Build date: 3/14/2012
The implementation of float in Internet Explorer follows the CSS Level 1 recommendation, so "float: inherit" is not a recognized property value. The "inherit" keyword explicitly overrides the default inheritance behavior of CSS, which allows the child element to take on the same value as its parent. Even though the value of float is not inherited from the parent in IE, child elements naturally float along with their containing block. In most cases, "float: none" is sufficient.
For browsers that support it, "float: inherit" prevents the margins of floated child elements from being collapsed with the parent. In Internet Explorer, margins are always collapsed.
Caution: Uniform layout of nested right-floating elements is not well-supported among browsers.
- 8/29/2007
- John Sudds [Microsoft]
- 8/29/2007
- John Sudds [Microsoft]
