Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS Float

  • Last Updated : 05 Nov, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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 Chrome 1.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Internet Explorer 4.0
  • Safari 1.0
  • Opera 7.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!