Open In App

CSS Float

Last Updated : 01 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The CSS float property is used to move an element out of the normal document flow and position it to the left or right of its container. For example, float: left moves the element to the left, and float: right moves it to the right.

Other content will wrap around the floated element which helps to create a more dynamic layout. Although there’s no direct float: center in CSS, you can use other methods like margins to center elements.

Syntax

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

Property values

ValueDescription
noneDefault value; the element does not float.
leftElement floats on the left side of the container, allowing content to flow around its right side.
rightElement floats on the right side of the container, allowing content to flow around its left side.
initialElement is set to its default value.
inheritThe element inherits the floating property from its parent element.

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

Examples of CSS Float

Example 1: Using CSS float: left

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

HTML 
<!DOCTYPE html>
<html>

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

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

</html>

Output:

: Using CSS float: left - output

Example 2: Using CSS float: right

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

HTML 
<!DOCTYPE html>
<html>

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

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

</html>

Output:

Using CSS float: right - outptut

Example 3: Using CSS float: none

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

HTML 
<!DOCTYPE html>
<html>

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

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

</html>

Output:

Using CSS float: none - output

Example 4: Using CSS float: inherit

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

HTML 
<!DOCTYPE html>
<html>

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

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

</html>

Output:

Using CSS float: inherit- output

Supported Browsers

The CSS float property is widely supported across major browsers:

Note: These versions indicate when support for the float property was introduced. Since it’s an older CSS feature, it is fully supported in all modern browsers.



Next Article
CSS Align

K
Kartikaybhutani
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox