CSS Float

The CSS float property positions an element to the left or right within its container, allowing other elements to wrap around it. It’s commonly used for layouts where content should flow around images or blocks, creating responsive and dynamic designs.

Syntax:

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

Property values:

Value	Description
`none`	Default value; the element does not float.
`left`	Element floats on the left side of the container, allowing content to flow around its right side.
`right`	Element floats on the right side of the container, allowing content to flow around its left side.
`initial`	Element is set to its default value.
`inherit`	Element inherits the floating property from its parent element.

We will use the above property values & understand their usage through the example.

Table of Content

float: left; CSS property
float: right; CSS property
float: none; CSS property
float: inherit; CSS property

The float: left; CSS property positions an element on the left side of its container, allowing content to flow around its right side.

Example: In this example we demonstrates the use of the CSS `float: left;` property within an inline style to float the “w3wiki” text to the left side of its container.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Float</title>
</head>

<body>
    <div class="GFG" 
         style="font-size:40px; 
                color:#006400;
                float:left;">
        w3wiki
    </div>
</body>

</html>

Output:

The float: right; CSS property positions an element on the right side of its container, allowing content to flow around its left side.

Example: In this example we uses the float: right; CSS property within an inline style to position the “w3wiki” text on the right side of its container with a green color and large font size.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Float</title>
</head>

<body>
    <div class="GFG" 
         style="font-size:40px; 
                color:#006400; 
                float:right;">
        w3wiki
    </div>
</body>

</html>

Output:

The float: none; CSS property resets the floating behavior of an element, causing it to not float and remain in the normal document flow.

Example: In this example we showcases the use of the float: none; CSS property within an inline style, ensuring that the “w3wiki” text does not float and remains within the normal document flow.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Float</title>
</head>

<body>
    <div class="GFG" 
         style="font-size:40px; 
                color:#006400; 
                float:none;">
        w3wiki
    </div>
</body>

</html>

Output:

The float: inherit; CSS property makes an element inherit the float value from its parent element, ensuring consistency with the parent’s floating behavior.

Example: In this example we demonstrates the use of the float: inherit; CSS property within an inline style applied to a nested “w3wiki” div, inheriting the float behavior from its parent div set to float right.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Float</title>
</head>

<body>
    <div style="float:right">
        <div class="GFG" style="font-size:40px; 
                    color:#006400; 
                    float:inherit;">
            w3wiki
        </div>
    </div>
</body>

</html>

Output:

Supported Browsers:

float: left; CSS property

float: right; CSS property

float: none; CSS property

float: inherit; CSS property

Contact Us