CSS Float

The float CSS 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.

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

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

HTML

<!DOCTYPE html>
<html>

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

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

</html>

Output:

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

HTML

<!DOCTYPE html>
<html>

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

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

</html>

Output:

none: The element remains the same as it is declared ie it will no effect on the element & this is the default value.

HTML

<!DOCTYPE html>
<html>

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

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

</html>

Output:

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

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;"> 
          GeeksforGeeks 
          </div>
    </div>
</body>

</html>

Output:

Supported Browsers:

Google
Microsoft Edge
Firefox
Safari
Opera

Article Tags :

CSS

Web Technologies

CSS-Basics