CSS float property
Definition and usage
The float property defines the direction in which an element floats. In the past, this property was always applied to images, causing text to wrap around the image, but in CSS, any element can float. Floating elements generate a block-level box, regardless of what type of element it is.
If floating a non-replaced element, specify a clear width; otherwise, they will be as narrow as possible.
Note:If there is only a little space available above a line for the floating element, then this element will jump to the next line, and this process will continue until a line has enough space.
See also:
CSS Tutorial:CSS Positioning
HTML DOM Reference Manual:cssFloat property
CSS syntax
float: none|left|right|initial|inherit;
Attribute value
Value | Description |
---|---|
left | The element floats to the left. |
right | The element floats to the right. |
none | Default value. The element does not float and is displayed at the position where it appears in the text. |
inherit | Specifies that the value of the float property should be inherited from the parent element. |
Technical details
Default value: | none |
---|---|
Inheritance: | no |
Version: | CSS1 |
JavaScript syntax: | object.style.cssFloat="left" |
Try It Yourself example
- Simple application of the float property
- Float an image to the right of a paragraph.
- Float an image with borders and margins to the right of the paragraph
- Float an image to the right of the paragraph. Add borders and margins to the image.
- Image with a title floats to the right
- Float an image with a title to the right
- Float the first letter of the paragraph to the left
- Float the first letter of the paragraph to the left and add styles to this letter.
- Create a horizontal menu
- Create a horizontal menu using floating with one-column hyperlinks.
- Create a homepage without a table
- Use floating to create a homepage with a header, footer, left catalog, and main content.
Browser support
The numbers in the table indicate the first browser version that fully supports this attribute.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 4.0 | 1.0 | 1.0 | 7.0 |