You are here: Reference > CSS > properties > float

float property

Browser support:
Specifies the horizontal alignment of the object.
With this property you can enable floating on the left or right side of an element. If float is set, the display property is ignored and the element is shown as a block-level element. Block element means that by default the entire line where the element appears is reserved. With the float property you can specify which side of the element HTML content may appear on.
JavaScript page for this property: cssFloat | styleFloat. You can find other example(s) there.

Possible values:

 One of the following values: 
inherit
Takes the value of this property from the computed style of the parent element.
left
Surrounding content flows to the right of the element.
none
Default. The element is not floated.
right
Surrounding content flows to the left of the element.
Default: none.

Example HTML code 1:

This example illustrates the use of the float property:
<head>
    <style>
        .floating {
            float: left;
            background: cyan;
            height: 30px;
        }
        .clear {
            clear: left;
        }
    </style>
</head>
<body>
    <i class="floating">Floating element</i>
    <div class="clear">
        This sentence forbids floating elements on the left side.
    </div>

    <br /><br />
    
    <i class="floating">Floating element</i>
    <div>
        This sentence does not forbid floating elements on the left side.
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content