Categories
CSS Tutorials

Float

introduction
Formatting Text
Box Model
Advanced selectors
More about CSS

The CSS float property is used to position the elements to the left, right, of its container along with permitting the text and inline elements to wrap around it. The float property defines the flow of content in the page. The remaining elements will be part of the flow if the element is removed from the normal flow of the content. This property is ignored by the absolutely positioned elements. It can be written in a CSS file or can be directly specified in the style of an element.

Syntax:

float: none|left|right|initial|inherit;

Property values:

  • none: This is the default value & the element does not float.
  • left: Element floats on the left side of the container.
  • right: Element floats on the right side of the container.
  • initial: Element will be set to its default value.
  • inherit: Element inherits floating property of its parent property.

left: The element will be positioned to the left side of its containing block.

Example:

<html>
    <head>
        <title>Float</title>
    </head>
    <body>
        <div class="ept" style="font-size:40px;color:#006400; float:left;">Edupoly Tutorials </div>
    </body>
</html>

Output:

right: The element will be positioned to the right side of its containing block.

Example:

<html>
    <head>
        <title>Float</title>
    </head>
    <body>
        <div class="ept" style="font-size:40px;color:#006400; float:right;">Edupoly Tutorials </div>
    </body>
</html>

Output:

none: The element remains the same as it is declared i.e. it will have no effect on the element and this is the default value.

Example:

<html>
    <head>
        <title>Float</title>
    </head>
    <body>
        <div class="ept" style="font-size:40px;color:#006400; float:none;">Edupoly Tutorials </div>
    </body>
</html>

Output:

inherit: It is used to inherit a property to an element from its parent element property value.

Example:

<html>
    <head>
        <title>Float</title>
    </head>
    <body>
        <div style="float:right">
            <div class="ept" style="font-size:40px;color:#006400; float:inherit;"> Edupoly Tutorials </div>
        </div>
    </body>
</html>

Output: